8

鉴于这段 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"}}>
4

3 回答 3

3

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

{{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。

于 2013-02-17T22:12:54.417 回答
1

我是 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）并且有不止一行代码，那么不幸的是它会变得有点难看。但可能仍会使用该方法。

于 2013-02-20T15:30:43.600 回答
1

对于我想要的任何属性，我如何将其变成可重用的部分？IE：邮箱、密码、密码确认等

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

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

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

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

看：

  1. 可以多次使用（{{render}} 不能这样做）

一个控件可以多次使用

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

还要记住，控件可以指定要在其模板中使用的模型- 有了这个，我们可以将属性绑定到模型数据。此外，如果控制器的模型发生更改，则其子控制器将被销毁，因此如果模型被换出，控件将按预期重置。

于 2013-02-24T05:22:20.033 回答