Question

我需要制作一个包含10个文本字段元素的引导程序表单。

从bootstrap doc，我需要为每个textfield元素提供此代码：

<div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
</div>

Em.TextField对象只管理

<input type="text...

我想最小化我的车把形式。

使用最少的代码获得预期结果的最佳解决方案是什么？
是否有此示例代码？

Answer 1

您可以创建一个包含所有必需引导标记的新视图，并合并内置的Ember.TextField输入元素。自定义TextField具有添加的label属性，用于设置表单标签的文本。

JSBin Example

自定义TextField：

JS：

App.BootstrapTextFieldView = Ember.View.extend({
  templateName: 'bootstrapTextField',
  inputElement: null
});

车把：

<script type="text/x-handlebars" data-template-name='bootstrapTextField'>
  <div class='control-group'>
    <label class="control-label" {{bindAttr for='view.inputElement.elementId'}}>{{view.label}}</label>
    <div class="controls">
      {{view Ember.TextField valueBinding='view.value' viewName="inputElement"}}
    </div>
  </div>
</script>

使用新视图

您会使用它与使用普通Ember.TextField：

类似

<form class="form-horizontal">
    {{view App.BootstrapTextFieldView valueBinding='textFieldValue' labelBinding='textFieldLabel'}}
</form>

唯一棘手的部分是在for='..."上正确设置<label>属性，因为我们需要获取{{view Ember.TextField ...}}的自动生成ID。这可以通过使用{{view ...}}帮助器的the viewName属性来完成。通过设置{{view App.theViewHere viewName='desiredViewName'，我们可以访问我们创建的Ember.TextField实例，并使用for帮助程序将标签的{{bindAttr...}}属性设置为视图的ID。

扩展Em.TextField

1 个答案: