使用Ember.js视图渲染集合

Rendering collection using Ember.js views

本文关键字：集合 视图 Ember js 使用      更新时间：2023-09-26

我想用Ember.js视图渲染一个集合。以下是我的要求:

  1. 我不想为集合中的每个项目生成两个变形脚本标签，DOM结构应该严格地只是ul和li(我不介意li内部的变形)
  2. 我的集合中的每个项目都有一个选定的属性。根据这个属性值，我想将选定的类设置为LI
  3. 我希望整个东西都定义在一个模板中，只有一个视图在JavaScript中使用这个模板-没有额外的类

使用{{each}} helper不满足第一个要求。使用{{collection}}，我无法有条件地将CSS类分配给LI(我不是说这是不可能的，只是不知道如何)。看来是有可能满足我的。和2。如果我的LI被定义为Ember.View，那么我最终会为简单的用例编写大量的样板文件。

这是jsbin与我的代码，目标是有我的名字以粗体显示，我想知道如果它是可能的。

我认为你不写一个项目视图类是无法摆脱的。这并不是一个样板文件:

App.MyItemView = Ember.View.extend({
  classNameBindings: 'content.selected:selected'
});

车把:

{{#collection contentBinding="view.options" itemViewClass="App.MyItemView"
              tagName="ul" itemTagName="li"}}
  {{view.content.selected}} – {{view.content.name}}
{{/collection}}

我的替代方案是将项目的内容包装到一个附加元素中:

{{#collection contentBinding="view.options" tagName="ul" itemTagName="li"}}
  <div {{bindAttr class="view.content.selected:selected"}}>
    {{view.content.selected}} &ndash; {{view.content.name}}
  </div>
{{/collection}}

，并相应地调整CSS:

li > .selected {
  font-weight: bold;
}

这样就不需要创建视图类了，但是我不确定对HTML结构的更改是否可以接受

相关文章：