如何在控件中绑定值形式输入select到属性 [英] How to bind value form input select to attribute in controller
问题描述
我尝试将值从输入选择绑定到控件中的selectedValue属性。
这是app.js
Food = Ember.Application.create();
Food.appsController = Ember.Object.create({
selectedValue:
});
Food.Todo = Ember.Object.extend({
title:null,
value:null
});
Food.FoodController = Ember.ArrayProxy.create({
content:[]
});
Food.FoodController.pushObject(Food.Todo.create({title:a,value:1}));
Food.FoodController.pushObject(Food.Todo.create({title:b,value:2}));
Food.FoodController.pushObject(Food.Todo.create({title:c,value:3}));
这是index.html
<$ p $
tagName =select
itemClassBinding =content.isDone}}
{ {content.title}}
{{/ collection}}
输出看起来像这样
< select id =ember180class =ember-view>
< option id =ember192class =ember-view>
< script id =metamorph-0-starttype =text / x-placeholder>< / script>
a
< script id =metamorph-0-endtype =text / x-placeholder>< / script>
< / option>
< option id =ember196class =ember-view>
< script id =metamorph-1-starttype =text / x-placeholder>< / script>
b
< script id =metamorph-1-endtype =text / x-placeholder>< / script>
< / option>
< option id =ember200class =ember-view>
< script id =metamorph-2-starttype =text / x-placeholder>< / script>
c
< script id =metamorph-2-endtype =text / x-placeholder>< / script>
< / option>
< / select>
我不知道如何向选项添加值,以及如何将选定的值绑定回控制器。
这是可能在Emberjs吗?
Ember现在有一个内置的选择视图。 >
您可以在最新的Ember.js构建中找到它: http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js
这是一个例子用法:
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'})
]
});
您的模板将如下所示:
{{查看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/
I try to bind value from input select to attribute "selectedValue" in controller.
This is app.js
Food = Ember.Application.create();
Food.appsController = Ember.Object.create({
selectedValue: ""
});
Food.Todo = Ember.Object.extend({
title: null,
value: null
});
Food.FoodController = Ember.ArrayProxy.create({
content: []
});
Food.FoodController.pushObject(Food.Todo.create({title:"a", value:"1"}));
Food.FoodController.pushObject(Food.Todo.create({title:"b", value:"2"}));
Food.FoodController.pushObject(Food.Todo.create({title:"c", value:"3"}));
This is index.html
{{#collection
contentBinding="Todos.todosController"
tagName="select"
itemClassBinding="content.isDone"}}
{{content.title}}
{{/collection}}
Output look like this
<select id="ember180" class="ember-view">
<option id="ember192" class="ember-view">
<script id="metamorph-0-start" type="text/x-placeholder"></script>
a
<script id="metamorph-0-end" type="text/x-placeholder"></script>
</option>
<option id="ember196" class="ember-view">
<script id="metamorph-1-start" type="text/x-placeholder"></script>
b
<script id="metamorph-1-end" type="text/x-placeholder"></script>
</option>
<option id="ember200" class="ember-view">
<script id="metamorph-2-start" type="text/x-placeholder"></script>
c
<script id="metamorph-2-end" type="text/x-placeholder"></script>
</option>
</select>
I have no idea how to add value to option and how to binding selected value back to controller. Is this possible to do in Emberjs?
Ember now has a built-in Select view.
You can find it in the latest Ember.js build here: http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js
Here's an example usage:
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'})
]
});
Your template would look like:
{{view Ember.Select
contentBinding="App.peopleController"
selectionBinding="App.selectedPersonController.person"
optionLabelPath="content.fullName"
optionValuePath="content.id"}}
Again, here's a jsFiddle example: http://jsfiddle.net/ebryn/zgLCr/
这篇关于如何在控件中绑定值形式输入select到属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!