Emberjs：使用父母和孩子的数据创建复杂的操作

Question

So I have this ember app I am building and everything has gone smoothly until now. I am in a bit of a jam and can't quite understand what I have to do, but I know what I want to do. The place where I am stuck is this: I want to display all the recordings for a user, and for each recording there will be 1 or 2 filtered versions (maybe more later). In the table that displays all a users recordings, I want to render a link for each version. Currently we form those links in the API by prepending something to the public id for the recording.

So here is some pseudocode to help illustrate what I am asking about:

//models
App.User = DS.model.extend({
  first_name: DS.attr('string'),
  last_name: DS.attr('string')
  recordings: DS.hasMany(App.Recording)
});

App.Recording = DS.model.extend({
  name: DS.attr('string'),
  filter: DS.hasMany(App.Filter)
});

App.Filter = DS.model.extend({
  name: DS.attr('string'),
  linkPrefix: DS.attr('string')
});

//router
App.Router.map( function(){
  this.resource('user', {path: '/:user_id'}, function(){});
});

//User template

<script type="text/x-handlebars" data-template-name="user">
    <table class="table">
      <thead>
        <tr>
          <th>Recording Name</th>
          <th>Filters</th>
        </tr>
      </thead>
      <tbody>
        {{#each recording in recordings}}
        <tr>
          <td>{{name}}</td>
          <td>
            {{#each filter in recording}}
              //pseudocode here: {{#view should combine linkPrefix + recording_id contentBinding="recording" (maybe??)}}{{filter.name}}{{/view}}
              //also need this link to handle the click and set it to "read" once the link has been clicked
            {{/each}}
          </td>
        </tr>
        {{/each}}
      </tbody>
    </table>
  </div>
</script>

If it isn't obvious, in the table cell for "Filters" I want to display names like "unfiltered" and "enhanced". Each name should link to the appropriate version of that recording which for now will just need to open in a new tab (I know, yuck).

So, after struggling with this for a while, I found I couldn't figure out how to get the parent recording id and the child linkPrefix to be rendered into a view; the big problem for me was that I couldn't get the view to "know about" both the parent recording and the child filter. Filter.name was a piece of cake, but I fear that this is not the "ember way." My gut tells me there is a way to do this part without even using an each loop. Thoughts?

Answer 1

Seems like what you need here is to add a few more properties to filter. First add a belongsTo relationship so that you can get to the recording, then a computed property that returns the filter url given the recording and linkPrefix.

App.Filter = DS.model.extend({
  name: DS.attr('string'),
  linkPrefix: DS.attr('string'),
  recording: DS.belongsTo(App.Recording),
  link: function() {
    return this.get('linkPrefix') + this.get('recording.id')
  }.property('linkPrefix', 'recording')
});

Now your handlebars template is easy:

        {{#each filter in recording}}
          <a {{action markFilterAsRead filter}} {{bindAttr href="filter.link"}}>{{filter.name}}</a>
        {{/each}}