Как привязать ввод формы значения выберите атрибут в контроллере

Я пытаюсь привязать значение из ввода select к атрибуту "selectedValue" в контроллере.

Это приложение.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"}));

Это показатель.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?

7
ember.js

4 ответов

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'})
    ]
});

ваш шаблон будет выглядеть так:

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

опять же, вот пример jsFiddle:http://jsfiddle.net/ebryn/zgLCr/

7

прыжок из решения для @pangrantz, этот пример скрипки (http://jsfiddle.net/bsyjr/) иллюстрирует некоторые улучшения: код руля чище благодаря использованию tagName. Когда tagName имеет значение "select", дочерние представления автоматически становятся элементами" option". Смотри на уголь.CollectionView.CONTAINER_MAP в https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/collection_view.js чтобы понять почему. На стороне Javascript, указав itemViewClass, мы можем добавить атрибут value в элемент option.

<script type="text/x-handlebars" >
    {{#collection Food.SelectView tagName="select" contentBinding="Food.foodController"
        valueBinding="Food.appsController.selectedValue"}}
      {{content.title}}
    {{/collection}}

    selected: {{view Ember.TextField valueBinding="Food.appsController.selectedValue"}}{{Food.appsController.selectedValue}}
</script>

Food = Ember.Application.create();

Food.SelectView = Ember.CollectionView.extend({
    value: null,
    itemViewClass: SC.View.extend({
        attributeBindings:['value'],
        valueBinding: 'content.value'
    }),

    valueChanged: function(){
        this.$().val( this.get('value') );
    }.observes('value'),

    didInsertElement: function(){
        var self = this;
        this.$().change(function(){
            var val = $('select option:selected').val();
            self.set('value', val);
        });
    }
});

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"}));

все еще есть возможность для улучшения обработки событий, которая не использует структуру событий Ember, и было бы разумно использовать пользовательский письменный SelectView, который не использует рули, так как IMO, сомнительно, сколько рулей значения добавляет в этом случае.

5

используя пользовательский Уголек.Вид работ для меня, но я думаю, что есть лучшее решение...

см. рабочий пример: эта скрипка http://jsfiddle.net/pangratz/hcxrJ/

руль:

{{#view Food.SelectView contentBinding="Food.foodController"
    valueBinding="Food.appsController.selectedValue"}}
    <select>
        {{#each content}}
            <option {{bindAttr value="value"}} >{{title}}</option>
        {{/each}}
    </select>
{{/view}}

app.js:

Food = Ember.Application.create();

Food.SelectView = Ember.View.extend({
    value: null,

    valueChanged: function(){
        this.$('select').val( this.get('value') );
    }.observes('value'),

    didInsertElement: function(){
        var self = this;
        this.$('select').change(function(){
            var val = $('select option:selected').val();
            self.set('value', val);
        });
    }
});

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"}));
4

Я не уверен, что это полезно для других, но я делал что-то подобное на основе ответов здесь и сделал этот SelectView, который должен работать и в этом контексте. Он привязывается к "изменению", разрабатывает представление, которое в настоящее время выбрано, а затем делает что-то с его содержимым.

Food.SelectView = Ember.CollectionView.extend({
  change: function(e) {
    var selected = this.$().find(":selected").index();
    var content = this.get('childViews')[selected].content;
    // Do something with the result
    Food.appsController.set('selectedValue', content.title);
  }
});

таким образом, вы можете передать объект, а не Индекс select.

1