如何参数化Ember视图

Question

我有一个像这样的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>

其中CCD_ 2和CCD_。上面的例子不起作用。

Answer 1

在您的示例中，您缺少注册calendar帮助程序，并在模板中指定正确的上下文。因为视图的默认上下文是控制器，所以您需要使用view属性来访问视图属性：

{{calendar view.date}}

但是，因为您想创建一个可重用的组件，我建议您使用ember组件，因为它是用于此目的的，所以您不需要使用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/

我希望它能帮助