Question

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

我不想为集合中的每个项目生成两个变形脚本标记，DOM结构应该严格地只是UL和LI（我不介意LI内部的变形）
我的收藏中的每件商品都有一个选定的属性。根据此属性值，我想将所选类设置为LI
我希望在模板中定义整个事物，并且只需要在JavaScript中使用此模板的一个视图 - 没有其他类

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

这是jsbin我的代码，目标是让我的名字以粗体显示，我想知道是否可能。

Answer 1

我认为如果不编写项目视图类，你就无法逃脱。然而，它并不是一个样板：

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

车把：

{{#collection contentBinding="view.options" itemViewClass="App.MyItemView"
              tagName="ul" itemTagName="li"}}
  {{view.content.selected}} &ndash; {{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结构的更改。

使用Ember.js视图渲染集合

1 个答案: