如何參數化Ember視圖？

我有灰燼看法是這樣的：如何參數化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是模型的入店性質。上面的例子不起作用。

來源

2013-08-27 hso

一個演示中，我想這樣做將DateView用於不同的模型字段，而無需爲每個字段編寫視圖。 – hso

在您的示例中，您缺少註冊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-27 19:30:05

確實有幫助。 :) – hso

如何參數化Ember視圖？

回答

相關問題