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>

调用助手时如何在“_date”模板上绑定日期view?我可以做这样的事情吗?

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

这里startsends是模型的可访问属性。上面的例子不起作用。

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 回答