0

次のような Ember ビューがあります。

App.DateView = Ember.View.extend({
    templateName: "_date",
    tagName: 'span',
    classNames: ['calendar-date'],
    attributeBindings: ['placement:data-placement', 'title'],
    placement: 'right',

    didInsertElement: function(){
        this.$().tooltip();
    },
});

私のテンプレートは次のとおりです。

<script type="text/x-handlebars" data-template-name="_date">
  {{calendar date}}
</script>

viewヘルパーを呼び出すときに「_date」テンプレートに日付をバインドするにはどうすればよいですか? このようなことはできますか？

<script type="text/x-handlebars" data-template-name="other">
  {{view App.DateView date="starts"}}
  {{view App.DateView date="ends"}}
</script>

ここでstartsとendsは、モデルのアクセス可能なプロパティです。上記の例は機能しません。

4

1 に答える 1

3

サンプルでは、calendar​​ヘルパーを登録し、テンプレートで正しいコンテキストを指定することができません。ビューのデフォルトのコンテキストはコントローラーであるため、プロパティを使用しviewてビューのプロパティにアクセスする必要があります。

{{calendar view.date}}

ただし、再利用可能なコンポーネントを作成したいので、ember componentsを使用することをお勧めします。これは、この目的のために意図されているためです。viewコンテキストはビュー自体であるため、使用する必要はありません。

テンプレート：

<script type="text/x-handlebars" data-template-name="components/date-view">    
    {{input type="date" valueBinding="date"}}
</script>

成分：

App.DateViewComponent = Ember.Component.extend({
    date: null,
    tagName: 'span',
    classNames: ['calendar-date'],
    attributeBindings: ['data-placement', 'title'],
    'data-placement': 'right',
    didInsertElement: function(){        
        //this.$().tooltip();
    }
});

したがって、一部のテンプレートでは、複数回使用できます。次に例を示します。

<script type="text/x-handlebars" data-template-name="index">
    Selected start: {{start}}<br/>      
    Selected end: {{end}}<br/>    
    Start: {{date-view dateBinding="start"}}<br/>      
    End: {{date-view dateBinding="end"}}<br/>      
</script>

これは、この作業のデモですhttp://jsfiddle.net/marciojunior/eBXKe/

役立つことを願っています

于 2013-08-27T19:30:05.623 に答える