2

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

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

使用{{each}}helper 不满足第一个要求。使用{{collection}}我无法有条件地将 CSS 类分配给 LI（我不是说不可能，只是不知道如何）。如果我的 LI 定义为 ，似乎可以满足 1. 和 2. Ember.View，但是我最终为简单的用例编写了很多样板。

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

4

1 回答 1

2

我认为如果不编写项目视图类，您将无法逃脱。虽然它不是一个样板：

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 结构的更改。

于 2013-03-04T13:03:24.463 回答