ember.js如何設置Ember選項的標題。

Question

我是Ember的入門者，我嘗試在我的應用程序中使用Ember.js（1.0.0.pre）。

我想爲我的Ember.Select的options設置標題以顯示鼠標懸停時的提示。 但是，我無法在API中找到有關該選項標題的任何信息。

我是否必須自己寫一個函數來填充"title"屬性？ 有沒有什麼辦法像"optionLabelPath"綁定"title"屬性的選項？

Answer 1

爲了實現這一目標，我們需要reopen的Ember.SelectOption

here是下面的例子

MyApp = Ember.Application.create(); 

Ember.SelectOption.reopen({ 
    attributeBindings: ['title'], 
    title: function() { 
    var titlePath = this.getPath('parentView.optionTitlePath'); 
    return this.getPath(titlePath); 
    }.property('parentView.optionTitlePath') 
}); 

MyApp.selectArray = [{ 
    label: "A", 
    id: "1", 
    title: "for Apple" 
    }, 
    { 
    label: "B", 
    id: "2", 
    title: "for Ball" 
    }]; 

把手

<script type="text/x-handlebars" > 
    {{view Ember.Select 
    contentBinding="MyApp.selectArray" 
    optionLabelPath="content.label" 
    optionValuePath="content.id" 
    optionClassPath="content.title" 
    }} 
</script>​ 

Answer 2

這是我能想出的最簡單的： http://jsfiddle.net/aK8JH/1/

模板：

{{view MyApp.Select contentBinding="content"}} 

查看：

MyApp.Select = Ember.Select.extend({ 
    attributeBindings: ['title'], 
    title: 'myTitle' 
}); 

閱讀：http://emberjs.com/documentation/#toc_attribute-bindings-on-a-view

Answer 3

下面的小提琴就是我在觀察源文件後得到了e代碼在Ember：

Ember.SelectOption.reopen({ 
    attributeBindings: ['title'], 

    init: function() { 
     this.titlePathDidChange(); 
     this._super(); 
    }, 

    titlePathDidChange: function() { 
     var titlePath = this.get('parentView.optionTitlePath'); 
     if (!titlePath) { return; } 

     Ember.defineProperty(this, 'title', Ember.computed(function() { 
      return this.get(titlePath); 
     }).property(titlePath)); 
    }.observes('parentView.optionTitlePath') 
});