EmberJS的可重用组件/视图 [英] Re-usable components/views for EmberJS

问题描述

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

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

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

  {{查看App.TextFieldWithLabel valueBinding ='approach'label ='ApproachLabel'}} 
  

Stack Overflow有一个类似的问题：使用Ember.js文本字段标识< label>标签

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

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

任何帮助将不胜感激。

编辑：2013年1月29日

我已经在 http://jsfiddle.net/ianpetzer/3WWaK/ 这清楚地显示了我想要实现的目标。我看不到从我将视图插入到模板中的位置传递的变量值。

解决方案

我在这里组织了一个小小的小提琴 http://jsfiddle.net/Energiz0r/sbnwb/3/
我已经遵循你的上述API：

  {{查看App.TextFieldWithLabel valueBinding ='方法'label ='ApproachLabel'}} 
  

希望这是你寻找的。

I'm trying to create a re-usable component or view for creating my labels and text inputs wrapped up in a Bootstrap control group. The component would need to create something like this:

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

That I can call using code along the lines of:

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

There is a similar question on Stack Overflow: Using Ember.js text field ids for a <label> tag

Where one of the answers includes a link to this jsFiddle. http://jsfiddle.net/GtsKK/2/

This is almost what I'm looking for but I'd like to understand how to pass the label and valueBinding through when I insert the view {{view App.TextFieldWithLabel}} instead of declaring them in a JS object array.

Any help would be appreciated.

EDIT: 29 Jan 2013

I have created another JSFiddle at http://jsfiddle.net/ianpetzer/3WWaK/ which clearly shows what I'm trying to achieve. I can't seem to get the variable value to be passed through from the point where I insert the view into the template.

解决方案

I have composed a little fiddle for you here http://jsfiddle.net/Energiz0r/sbnwb/3/ where I have followed your above API:

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

Hope this is what you looked for.

这篇关于EmberJS的可重用组件/视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！