1

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

从引导文档中，我需要为每个文本字段元素提供以下代码：

<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...

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

  • 用最少的代码获得预期结果的最佳解决方案是什么？
  • 有这方面的示例代码吗？
4

1 回答 1

1

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

JSBin 示例

自定义文本字段：

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 ...}}. 这可以通过使用助手的viewName属性来完成。{{view ...}}设置允许我们访问我们创建{{view App.theViewHere viewName='desiredViewName'的实例，并使用帮助器将标签的属性设置为视图的 id 。Ember.TextFieldfor{{bindAttr...}}

于 2013-05-28T20:48:25.307 回答