Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Jumping off from the solution for @pangrantz, this Fiddle example (http://jsfiddle.net/bsyjr/) illustrates some improvements: The Handlebars code is cleaner through the use of tagName. When tagName is set to "select", the child views automatically become "option" elements. See the Ember.CollectionView.CONTAINER_MAP in <a href="https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/collection_view.js">https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/collection_view.js</a> to understand why. On the Javascript side, by specifying an itemViewClass, we can add the value attribute to the option element.</p> <pre><code>&lt;script type="text/x-handlebars" &gt; {{#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}} &lt;/script&gt; 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"})); </code></pre> <p>There is still room for improvement in the event handling, which is not using Ember's event framework, and it would make a lot of sense to use a custom written SelectView that doesn't leverage Handlebars, since IMO, it is dubious how much value Handlebars adds in this case.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload