ガイドによると(これは常に危険にさらされているようです)、次のようにするとうまくいくと思います。
テンプレート
<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
ハンドラーで使用されるスクリプト ロジックの実際の属性名が必要なため、これは実際には機能しfor
ません。<label>
data-bindattr-8
{{labelText}}
更新: 明確にするために編集されました。