ember.js - ember.js 如何为 Ember.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')
});