ember.js - ember.jsEmber.Selectのオプションのタイトルを設定する方法

Question

私はEmberの初心者であり、アプリでEmber.js（1.0.0.pre）を使用しようとしています。

Ember.Selectのタイトルを設定してoptions、マウスオーバー時にヒントを表示しようとしています。しかし、APIでオプションのタイトルに関する情報を見つけることができません。

"title"属性を設定するために自分で関数を作成する必要がありますか？オプションの属性"optionLabelPath"をバインドする方法はありますか？"title"

Answer 1

これを達成するにreopenは、Ember.SelectOption

これが次の例のフィドルです

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>​

</ p>

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

以下は、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')
});