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>

此处starts和ends是模型的可访问属性。上面的例子不起作用。

Answer 1

在您的示例中，您缺少注册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/

我希望它有所帮助

如何参数化Ember View？

1 个答案: