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

问题描述

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

<label class="control-label" for="approachInputId">ApproachLabel</label><div class="控件">{{查看 Ember.TextField valueBinding='approach'}}

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

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

Stack Overflow 上有一个类似的问题:将 Ember.js 文本字段 ID 用于 <label>标签

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

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

任何帮助将不胜感激.

2013 年 1 月 29 日

我在 http://jsfiddle.net/ianpetzer/3WWaK/ 创建了另一个 JSFiddle这清楚地表明了我正在努力实现的目标.我似乎无法从我将视图插入模板的位置获取要传递的变量值.

解决方案

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

{{view App.TextFieldWithLabel valueBinding='approach' 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屋！