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，我希望这只是工作，但似乎我不能（不知道如何）将变量传递给部分。我查看了所有方法，包括模板部分＆＃34;：

部分
视图
呈现

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

修改：

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

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

适用于除valueBinding以外的所有内容。

我想还值得一提的是我有一个路由设置，其中一个动作在我的AuthController上调用login：

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

在这种情况下你应该使用component。

如果您正确设置模板（组件/字段 - 电子邮件），您可以这样使用：

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

让它工作，我不得不使用一个组件。我弄乱了“价值”部分。

components / 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>

login.hbs：

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

我从中得到的是，为了在组件中使用属性，在使用组件时必须明确设置它们。一旦设定，它们就会受到约束。

在我的情况下，当输入值改变时，相关的路由属性也会更新，这很酷。

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

2 个答案: