选择带有余烬的下拉菜单 [英] select dropdown with ember
问题描述
我正在尝试生成一个选择输入,并将所选对象传递给视图上的更改事件。 ember联系人示例使用< ul>
,但选择该视图需要在每个视图之外,否则更改甚至不会被触发。
I'm trying to produce a select input and pass the selected object to the change event on the view. The ember contact example uses a <ul>
but with a select the view needs to be outside the each otherwise the change even isn't fired.
这里是查看js:
App.SelectView = Ember.View.extend({
change: function(e) {
//event for select
var content = this.get('content');
console.log(content);
App.selectedWidgetController.set('content', [content]);
},
click: function(e) {
//event for ul
var content = this.get('content');
console.log(content);
App.selectedWidgetController.set('content', [content]);
}
});
示例中的 ul
/ p>
The ul
from the example works:
<ul>
{{#each App.widgetController.content}}
{{#view App.SelectView contentBinding="this"}}
<li>{{content.name}}</li>
{{/view}}
{{/each}}
</ul>
但是,如果我直接替换html,更改事件不会被触发(这是有道理的) p>
But if I replace html directly, the change event isn't fired (which makes sense)
<select>
{{#each App.widgetController.content}}
{{#view App.SelectView contentBinding="this"}}
<option>{{content.name}}</option>
{{/view}}
{{/each}}
</select>
所以我猜想选择必须被包装在视图中..在这种情况下我如何通过相关对象?...此代码导致整个数组被传递:
So I guess the select has to be wrapped in the view.. in which case how do I pass the relevant object?... This code results in the entire array being passed:
{{#view App.select_view contentBinding="App.widgetController.content"}}
<select>
{{#each App.widgetController.content}}
<option>{{name}}</option>
{{/each}}
</select>
{{/view}}
推荐答案
现在有一个内置的选择视图。
Ember now has a built-in Select view.
这是一个使用示例:
var App = Ember.Application.create();
App.Person = Ember.Object.extend({
id: null,
firstName: null,
lastName: null,
fullName: function() {
return this.get('firstName') + " " + this.get('lastName');
}.property('firstName', 'lastName').cacheable()
});
App.selectedPersonController = Ember.Object.create({
person: null
});
App.peopleController = Ember.ArrayController.create({
content: [
App.Person.create({id: 1, firstName: 'Yehuda', lastName: 'Katz'}),
App.Person.create({id: 2, firstName: 'Tom', lastName: 'Dale'}),
App.Person.create({id: 3, firstName: 'Peter', lastName: 'Wagenet'}),
App.Person.create({id: 4, firstName: 'Erik', lastName: 'Bryn'})
]
});
您的模板将如下所示:
{{view Ember.Select
contentBinding="App.peopleController"
selectionBinding="App.selectedPersonController.person"
optionLabelPath="content.fullName"
optionValuePath="content.id"}}
再次,这里是一个jsFiddle示例: a href =http://jsfiddle.net/ebryn/zgLCr/> http://jsfiddle.net/ebryn/zgLCr/
Again, here's a jsFiddle example: http://jsfiddle.net/ebryn/zgLCr/
这篇关于选择带有余烬的下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!