Question

所以我有这个我正在构建的余烬应用程序，一切顺利到现在为止。我有点陷阱，不太明白我要做什么，但我知道我想做什么。我被困的地方是这样的：我想显示用户的所有录音，并且每个录音将有1或2个过滤版本（可能更晚）。在显示所有用户录制的表中，我想为每个版本呈现链接。目前，我们通过在录制的公共ID之前添加内容来在API中形成这些链接。

所以这里有一些伪代码来帮助说明我的问题：

//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>

如果不明显，在“过滤器”的表格单元格中，我想显示“未过滤”和“增强”等名称。每个名称都应该链接到该录音的相应版本，现在只需要在新标签中打开（我知道，yuck）。

所以，在经历了一段时间的努力之后，我发现我无法弄清楚如何将父记录id和子linkPrefix渲染到视图中;对我来说最大的问题是我无法让“了解”父记录和子过滤器。 Filter.name是小菜一碟，但我担心这不是“蠢货”。我的直觉告诉我，有一种方法可以做这个部分，甚至没有使用每个循环。想法？

Answer 1

似乎你需要的是添加一些属性来过滤。首先添加一个belongsTo关系，以便您可以进入录制，然后是一个计算属性，它返回给定录制和linkPrefix的过滤器URL。

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')
});

现在您的车把模板很简单：

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

Emberjs：使用来自父级和子级的数据创建复杂的操作

1 个答案: