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}}时传递标签和valueBinding，而不是在JS对象数组中声明它们。

任何帮助都将不胜感激。

编辑：2013年1月29日

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

Answer 1

模板表达式及其行为

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

因此，请使用第一个选项绑定视图属性

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

Answer 2

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

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

希望这是你所寻找的。

Answer 3

如果您正在考虑使用Ember创建引导字段，那么到目前为止我找到的最佳方法是Ember Bootstrap

虽然它没有得到很好的记录，但我发现使用它非常简单，并且你会节省很多时间，因为它已经很好地实现了。我发现代码非常简洁，如果你花时间看它是如何工作的，你会对Ember有很多了解。

要更具体地回答您的问题，如果您按上图所示插入Ember视图，则视图对象将能够访问this.get('value')和this.get('label')。一个是文字而一个是绑定并不重要。 Ember的优雅之处在于它可以为您解决这个问题。

EmberJS的可重用组件/视图

3 个答案: