1

根据指南（似乎总是有风险），我相信以下应该有效。

模板

<script type="text/x-handlebars" data-template-name="slideToggle">
    {{#if checked}}        
        <div class="slideToggle">
    {{else}}
        <div class="slideToggle off">
    {{/if}}
        <span {{bind-attr on=onText}} {{bind-attr off=offText}}>
          {{#if checked}} {{onText}} {{else}}{{offText}}{{/if}}
        </span>
    </div>
    {{input type="checkbox" class="hidden" name=name }}
    <label for={{bind-attr name=name}}>{{labelText}}</label>
</script>

看法

App.slideToggle = Ember.View.extend({
    templateName:   'slideToggle'
,   onText      :   'on'
,   offText     :   'off'
,   labelText   :   ''
,   classNames  :   ['slideToggleWrapper']
,   name        :   ''
,   checked     :   false
});

此视图用于其他模板，目前如下：

用法（includeJobs 当前为 false）

{{view App.slideToggle name="includeJobs" labelText="Jobs" checked=includeJobs}}

预期的 HTML（仅最相关的部分）

<span on="on" off="off">off</span>
<label for="includeJobs">Jobs</label>

我实际得到的数据绑定（只有意想不到的部分）

<span data-bindattr-6="6" data-bindattr-7="7"></span>
<label data-bindattr-8="8">[script placeholder but no text]</label>

这真的行不通，因为我需要action处理程序中使用的脚本逻辑的实际属性名称，而且很明显，如果fora 的属性<label>被命名为data-bindattr-8此外，my{{labelText}}根本不输出！

更新：为清楚起见进行了编辑。

4

1 回答 1

1

每个元素只能使用一个 bind-attr

{{bind-attr on='onText' off='offText'}}

你的标签应该是这样的

<label {{bind-attr for='name'}}>

引号不是必需的，它可以双向工作：

http://emberjs.jsbin.com/uDAXayA/2/edit

于 2013-10-28T16:57:16.413 回答