如何将值表单输入选择绑定到控制器中的属性 [英] How to bind value form input select to attribute in controller

问题描述

我尝试将输入选择中的值绑定到控制器中的属性selectedValue".

I try to bind value from input select to attribute "selectedValue" in controller.

这是 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

This is index.html

{{#collection
    contentBinding="Todos.todosController"
    tagName="select"
    itemClassBinding="content.isDone"}}
  {{content.title}}
{{/collection}}

输出看起来像这样

<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>

我不知道如何为选项添加值以及如何将选定的值绑定回控制器.这可以在 Emberjs 中实现吗?

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 现在有一个内置的选择视图.

Ember now has a built-in Select view.

您可以在此处找到最新的 Ember.js 版本:http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js

You can find it in the latest Ember.js build here: 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'})
    ]
});

您的模板将如下所示:

{{view Ember.Select
       contentBinding="App.peopleController"
       selectionBinding="App.selectedPersonController.person"
       optionLabelPath="content.fullName"
       optionValuePath="content.id"}}

同样，这是一个 jsFiddle 示例:http://jsfiddle.net/ebryn/zgLCr/

Again, here's a jsFiddle example: http://jsfiddle.net/ebryn/zgLCr/

这篇关于如何将值表单输入选择绑定到控制器中的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！