如何在ember.js中为重复标记创建可重用的分部？

考虑到这段HTML：

<div id="email_field" class="control-group">
  <label class="control-label" for="account.email">Email</label>
  <div id="email_input" class="controls">
    <input id="account.email" name="account.email" type="text" placeholder="jpublic@example.com">
    <span class="help-block">We just need a valid email address.</span>
  </div>
</div>

---

---

---

---

我将创建一个包含所有可变参数的视图。例如：

{{view App.FormEntity
    name="email"
    placeholder="My placeholder..."
    help="We just need a valid email address."
    valueBinding="value"
}}

您可以从中提取标签和各种类名，然后使用

Ember.TextField

将值绑定到

---

一旦您将所有这些参数传递到视图中，使用

bindAttr

s、几个计算属性和Ember帮助程序（例如

Ember.TextField

）的混合体创建标记就应该很容易了，但是你不能简单地用它吗？ 我会亲自尝试，如果成功的话，我可以提供更多的更新

更新： 好的，我开始工作了。我使用FormgeneratorHelper.js和以下代码创建了一个新的Helpers文件夹：

Ember.Handlebars.registerBoundHelper('control-group', function (options) {
    var name = options.hash.test.capitalize();
    console.log(name);
    return new Handlebars.SafeString('<div class="control-group"> \
            <label class="control-label" for="input' + name + '">' + name + '</label> \
            <div class="controls"> \
                <input type="text" id="input' + name + '" placeholder="' + name + '" /> \
            </div> \
        </div>');
});

我真的很喜欢使用helpers的想法，但是如果您使用的是纯Javascript（与CoffeScript相反），并且有多行代码，那么不幸的是，它会变得有点难看。但可能仍会使用这种方法

如何将其转换为可重用的部分，以满足我所需的任何属性？IE：电子邮件、密码、密码确认等

您需要的是实验性的

{{control}

助手。控制助手目前正在开发中，被认为是实验性的。要启用它，请在需要Ember之前设置

ENV.EXPERIMENTAL\u CONTROL\u HELPER=true

我想： 1.使用特定视图（InputView） 2.使用一个特定的控制器（最好类似地命名为：InputController）（{view}}不这样做，我想）

开箱即用的控件帮助程序希望传递一个模板名称。该模板名称用于查找匹配的视图和控制器。例如：

App.InputView = Ember.View.extend()
App.InputController = Ember.Controller.extend()
{{control input}}

见：

能够多次使用此选项（{render}}无法执行此操作）

能够传入值（{render}}不能这样做）

与

{{view}}

帮助程序一样，

{{{control}}

将接受任意名称/值对。因此，在您的示例中，可以手动将选项传递给控件助手。与

{{view}}

帮助程序一样，这些选项成为视图实例上的属性：

<!-- templates/form/input.hbs -->
<label class="control-label" {{bindAttr for="view.inputId"}}>
  {{view.label}}
</label>
<div class="controls">
  <input {{bindAttr id="view.inputId" name="view.name" type="type" placeholder="view.placeholder"}}>
  <span class="help-block">{{view.help}}</span>
</div>

// controllers/form_input.js
App.FormInputController = Ember.ObjectController.extend({
  type: "text"
});

// views/form_input.js
App.FormInputView = Ember.View.extend({
  classNames: ["control-group"]
});

<!-- templates/application.hbs -->
{{control "form/input" 
    inputId="account.email" 
    name="email"
    label="Email" 
    placeholder="jpublic@email.com" 
    help="We just need a valid email address."
}}

{{view.label}
{{view.help}
//控制器/form_input.js
App.FormInputController=Ember.ObjectController.extend({
键入：“文本”
});
//视图/表单_input.js
App.FormInputView=Ember.View.extend({
类名：[“控制组”]
});
{{控件“窗体/输入”
inputId=“account.email”
name=“电子邮件”
label=“电子邮件”
占位符=”jpublic@email.com" 
help=“我们只需要一个有效的电子邮件地址。”
}}

请参见此示例

---

还请记住，有了它，我们可以将属性绑定到模型数据。同样，如果模型被调出，控件将按预期重置。

非常好的响应，谢谢，但这让我想知道当使用bindAttr时视图会寻找什么控制器？我似乎无法从文档中收集到这一点。嗯，每个视图都应该有访问控制器的权限。默认情况下，如果您在

IndexRoute

中，则索引视图将有权访问

IndexController

，如果您在该索引视图中插入视图，则该视图将继承

IndexController

。也许这会有帮助：有趣，但我想对我没有帮助？我希望这个助手有自己的控制器。或者更具体地说，我有我不想附加到IndexController的计算值。所以我不接受这个答案，因为这实际上只给出了谜题的一部分，它实际上并没有解决我的问题：我想把这个可重用的HTML块，使它成为动态的，并在其他模板中使用它。然后使用类似于

{render的东西“input”property=“whatever”}

它会将

InputController

附加到您的

InputView

上。虽然这看起来确实是我想要的，但这绝对不是我想要的方式。这样它就变得无法维护。

{{view App.FormEntity
    name="email"
    placeholder="My placeholder..."
    help="We just need a valid email address."
    valueBinding="value"
}}

Ember.Handlebars.registerBoundHelper('control-group', function (options) {
    var name = options.hash.test.capitalize();
    console.log(name);
    return new Handlebars.SafeString('<div class="control-group"> \
            <label class="control-label" for="input' + name + '">' + name + '</label> \
            <div class="controls"> \
                <input type="text" id="input' + name + '" placeholder="' + name + '" /> \
            </div> \
        </div>');
});

{{control-group test="email"}}

App.InputView = Ember.View.extend()
App.InputController = Ember.Controller.extend()
{{control input}}

<!-- templates/form/input.hbs -->
<label class="control-label" {{bindAttr for="view.inputId"}}>
  {{view.label}}
</label>
<div class="controls">
  <input {{bindAttr id="view.inputId" name="view.name" type="type" placeholder="view.placeholder"}}>
  <span class="help-block">{{view.help}}</span>
</div>

// controllers/form_input.js
App.FormInputController = Ember.ObjectController.extend({
  type: "text"
});

// views/form_input.js
App.FormInputView = Ember.View.extend({
  classNames: ["control-group"]
});

<!-- templates/application.hbs -->
{{control "form/input" 
    inputId="account.email" 
    name="email"
    label="Email" 
    placeholder="jpublic@email.com" 
    help="We just need a valid email address."
}}