如何在控件中绑定值形式输入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屋！