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>

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