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

以下是我在观察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')
});

ember.js如何为Ember.Select设置选项的标题

3 个答案: