将变量传递给Ember.js中的把手部分

Question

我想做的应该是相当简单的.我想将变量传递给partials以获得可重用性.

我想做这样的事情:

<form {{action login content on="submit"}}>
  <fieldset>
    {{partial 'components/field-email' label="Email" fieldname="email" size="full"}}
    [...]
  </fieldset>
</form>

而不是这样做:

<form {{action login content on="submit"}}>
  <fieldset>
    <div {{bind-attr class=":field :email size"}}>
      <label {{bind-attr for=fieldname}}>{{label}}</label>
      {{input type="email" id=fieldname name=fieldname valueBinding="email" placeholder=label}}
    </div>
    [...]
  </fieldset>
</form>

来自Rails,我希望这只是工作,但似乎我不能(不知道如何)将变量传递给部分.我查看了"包含模板部分"的所有方法:

• 局部
• 视图
• 给予

对我有用的是使用View.但我认为这太过分了.我只想要单独的子模板,以实现可重用性和可读性,不需要更改上下文或指定所需的控制器.

编辑:

我也尝试将此部分用作组件:

{{field-email type="email" id="email" name="email" valueBinding="email" placeholder=label size="full"}}

哪个适用于除valueBinding之外的所有内容.

我想还值得一提的是我有一个路由设置,其中一个动作调用我的AuthController登录:

App.LoginRoute = Ember.Route.extend
  model: -> Ember.Object.create()
  setupController: (controller, model) ->
    controller.set 'content', model
    controller.set "errorMsg", ""
  actions:
    login: ->
      log.info "Logging in..."
      @controllerFor("auth").login @

如果所有标记都在登录模板中,那么整个过程都有效,但如果我尝试使用部分,组件等进行分解,则会失败.

必须有一些我没看到的东西......

Answer 1

在这种情况下,您应该使用组件.

如果您正确设置模板(components/field-email),您可以这样使用:

{{field-email label="Email" fieldname="email" size="full"}}

如果定义组件,则可以设置html组件属性.根据您的示例,它可能是:

App.FieldEmailComponent = Ember.Component.extend({
  classNames: ['size'],
  classNameBindings: ['email', 'field'],
  field: null,
  email: null

});

示例:http://emberjs.jsbin.com/hisug/1/edit

Answer 2

让它工作起来，我必须使用一个组件。我搞砸了“价值”部分。

组件/field-email.hbs：

<div {{bind-attr class=":field :email size"}}>
  <label {{bind-attr for=fieldname}}>{{label}}</label>
  {{input type="email" name=fieldname value=value placeholder=label}}
</div>

登录.hbs：

<form {{action login content on="submit"}}>
  <fieldset>
    {{field-email label="Email" fieldname="email" value=email size="full"}}
    [...]
  </fieldset>
</form>

我从中得到的是，为了在组件中使用属性，必须在使用组件时显式设置它们。一旦设置完毕，它们就被绑定了。

就我而言，当输入值更改时，关联的路由属性也会更新，这非常酷。