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ハンドラーで使用されるスクリプト ロジックの実際の属性名が必要なため、これは実際には機能しforません。<label>data-bindattr-8{{labelText}}

更新: 明確にするために編集されました。

4

1 に答える 1