EmberJS 的可重用组件/视图

Question

我正在尝试创建一个可重用的组件或视图，以创建包装在 Bootstrap 控制组中的标签和文本输入。该组件需要创建如下内容：

<div class="control-group">
  <label class="control-label" for="approachInputId">ApproachLabel</label>
  <div class="controls">
    {{view Ember.TextField valueBinding='approach'}}
  </div>
</div>

我可以使用以下代码调用：

{{view App.TextFieldWithLabel valueBinding='approach' label='ApproachLabel'}} 

Stack Overflow 上有一个类似的问题：Using Ember.js text field ids for a <label> tag

其中一个答案包括指向此 jsFiddle 的链接。 http://jsfiddle.net/GtsKK/2/

这几乎是我正在寻找的，但我想了解当我插入视图 {{view App.TextFieldWithLabel}} 而不是在 JS 对象数组中声明它们时如何传递标签和 valueBinding。

任何帮助将不胜感激。

编辑：2013 年 1 月 29 日

我在http://jsfiddle.net/ianpetzer/3WWaK/ 创建了另一个 JSFiddle，它清楚地显示了我想要实现的目标。我似乎无法从将视图插入模板的位置传递变量值。

Answer 1

我在这里为你编了一个小小提琴http://jsfiddle.net/Energiz0r/sbnwb/3/ 我在哪里遵循了您的上述 API：

{{view App.TextFieldWithLabel valueBinding='approach' label='ApproachLabel'}} 

希望这就是你要找的。​​p>

Answer 2

模板表达式及其行为

• {{view.name}} 将从视图中选择值
• {{controller.name}} 将从控制器中选取值
• {{name}} 将从视图的上下文中选择值

所以，请使用第一个选项来绑定视图属性

更新小提琴 - http://jsfiddle.net/VenkataSuresh/3WWaK/2/

Answer 3

如果您希望使用 Ember 创建引导字段，到目前为止我发现的最佳方法是 Ember Bootstrap

虽然它没有很好的文档记录，但我发现它使用起来非常简单，因为它的实施非常好，你会为自己节省很多时间。我发现代码非常简洁，如果您花时间看看 Ember 是如何工作的，您会学到很多关于 Ember 的知识。

为了更具体地回答您的问题，如果您插入如上所示的 Ember 视图，则视图对象将能够访问 this.get('value') 和 this.get('label')。一个是文字，一个是绑定都没关系。 Ember 优雅的部分原因在于它可以为您处理这个问题。