ember.js как установить название опции для Ember.Select

Question

Я стартер Ember, и я пытаюсь использовать Ember.js (1.0.0.pre) в своем приложении.

Я пытаюсь установить заголовок для моего Ember.Select's 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 code in 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') 
});