Question

考虑到这一块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>

如何将其转换为可重复使用的部分，无论我想要什么属性？ IE：电子邮件，密码，密码确认等。

我会假设某种视图层次结构，但我不太确定。

编辑：经过进一步探索后，我淘汰了{{view}}和{{render}}并找出了我需要的内容：

我想： 1.使用特定视图（InputView） 2.使用特定的控制器（最好类似命名：InputController）（我认为{{view}}不这样做） 3.能够多次使用（{{render}}不能这样做） 4.能够传入值（{{render}}不能这样做）

示例：

<!-- templates/application.hbs -->
{{foo "input" name="Email" id="account.email" placeholder="jpublic@email.com"}}

// controllers/input.js
Application.InputController = Ember.ObjectController.extend({
  type: "text"
});

// views/input.js
Application.InputView = Ember.View.extend({
  templateName: "form/input"
});

<!-- templates/form/input.hbs -->
<input {{bindAttr id="id" name="name" type="type" placeholder="placeholder"}}>

Answer 1

我会创建一个视图，它接受所有可变参数。如：

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

从那里你可以提取标签，各种类名，然后使用Ember.TextField将值绑定到。

一旦将所有这些参数传递到视图中，使用bindAttr s，几个计算属性和Ember助手（例如{的混合物）来创建标记应该很容易且很容易{1}}）。

Answer 2

我是Emberjs的新手并且寻找几乎相同的东西，但你不能简单地使用http://emberjs.com/guides/templates/writing-helpers/吗？我会亲自尝试一下，如果能够解决的话，可以提供更多更新。

<强>更新好的，我得到了它的工作。我使用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>');
});

那么，无论你在哪个模板中做到：

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

我非常喜欢使用帮助器的想法，但是如果你使用普通的Javascript（而不是CoffeScript）并且有多行代码，那么不幸的是它会变得有点难看。但是可能仍然会使用这种方法。

Answer 3

如何将其转换为可重复使用的部分，无论我想要什么属性？ IE：电子邮件，密码，密码确认等。

你想要的是实验性{{control}}助手。控制助手目前正在开发中，被认为是实验性的。要启用它，请在要求Ember之前设置ENV.EXPERIMENTAL_CONTROL_HELPER = true。

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

开箱即用控件助手期望传递模板名称。该模板名称用于查找匹配的视图和控制器。例如：

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

见：

能够多次使用（{{render}}不能这样做）

A control can be used multiple times

能够传入值（{{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."
}}

有关工作示例，请参阅此jsbin

还要记住A control can specify a model to use in its template - 有了这个，我们可以将属性绑定到模型数据。另外if a controller's model changes, its child controllers are destroyed因此，如果模型被换出，控件将按预期重置。

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

3 个答案: