ember.js - 在 Ember.Select 中选择值时更新值

Question

我的模板中有一个 Ember.Select 和一个图像:

Difficulty: {{view Ember.Select id="id_diff" contentBinding="difficulties" optionValuePath="content.id" optionLabelPath="content.title"}}
<img src="(path)" />

选择填充来自服务器的值；在 Controller 中:

difficulties: function() {
    return this.get('store').find('difficulty');
}.property()

和型号:

Gmcontrolpanel.Difficulty = DS.Model.extend({
    title: DS.attr('string'),
    description: DS.attr('string'),
    path: DS.attr('string')
});

没关系；但我希望当从 Ember.Select 选择难度时，相应的路径属性将被插入到 img 标签中 有人知道如何得到这个结果吗？

Answer 1

为了实现这一目标，我会设置一些东西。

首先，更新您的 Ember.Select 以包含针对具有新属性的模型的 valueBinding:

{{view Ember.Select id="id_diff" contentBinding="difficulties" optionValuePath="content.id" optionLabelPath="content.title" valueBinding="selectedDificulty"}}

这会将您选择的 View 绑定(bind)到模型对象。这意味着，在 Controller 上，我们现在可以在该字段上包含一个带有 .observes 的新函数:

updateImage : function(){
    this.set('fullPath', this.get('path') + this.get('selectedDificulty'));
}.observes('selectedDificulty');

最后，将图像路径更改为新创建的路径:

<img src="(fullPath)"/>