seleziona menu a discesa con ember

Question

Sto provando a produrre un input di selezione e passare l'oggetto selezionato all'evento di modifica sulla vista. L'esempio di contatto ember utilizza uno <ul> ma con una selezione la vista deve essere al di fuori di ciascuno altrimenti la modifica non viene attivata.

Ecco l'js vista:

App.SelectView = Ember.View.extend({ 

    change: function(e) { 
     //event for select 
     var content = this.get('content'); 
     console.log(content); 

     App.selectedWidgetController.set('content', [content]); 
    }, 
    click: function(e) { 
     //event for ul 
     var content = this.get('content'); 
     console.log(content); 

     App.selectedWidgetController.set('content', [content]); 
    } 
}); 

Il ul dall'esempio funziona:

<ul> 
    {{#each App.widgetController.content}} 
     {{#view App.SelectView contentBinding="this"}} 
      <li>{{content.name}}</li> 
     {{/view}} 
    {{/each}} 
</ul> 

Ma se sostituisco direttamente html, l'evento di modifica non viene generato (che ha un senso)

<select> 
    {{#each App.widgetController.content}} 
     {{#view App.SelectView contentBinding="this"}} 
      <option>{{content.name}}</option> 
     {{/view}} 
    {{/each}} 
</select> 

Quindi immagino che la selezione debba essere racchiusa nella vista .. nel qual caso come faccio? passare l'oggetto corrispondente ... Questo codice determina l'intero array vengono passati:

{{#view App.select_view contentBinding="App.widgetController.content"}} 
    <select> 
    {{#each App.widgetController.content}} 
     <option>{{name}}</option> 
    {{/each}} 
    </select> 
{{/view}} 

Answer 1

Ember ora ha una vista di selezione interna.

Ecco un esempio di utilizzo:

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

Il modello sarà simile:

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

Ancora una volta, ecco un esempio jsFiddle: http://jsfiddle.net/ebryn/zgLCr/

Answer 2

controllo le risposte a una domanda simile: How to bind value form input select to attribute in controller

Negli esempi un CollectionView è utilizzato con un tagName = selezionare. Potresti trovarlo utile per farlo funzionare.

EDIT: Dal momento che stavo cercando di implementare un selezionare me stesso, ecco la soluzione mi è venuta:

views/form.js.hjs:

{{#view contentBinding="App.typeController" valueBinding="type" tagName="select"}} 
    {{#each content}} 
     <option {{bindAttr value="title"}}>{{title}}</option> 
    {{/each}} 
{{/view}} 
{{#view Ember.Button target="parentView" action="submitEntry"}}Save{{/view}} 

La select fa parte di un modulo. I controlli per l'evento di invio e in là leggere il valore:

app.js.coffee

# provides the select, add value: 'my_id' if you need differentiation 
# between display name (title) and value 
app.typeController = Ember.ArrayProxy.create 
    content: [{title:'Energy'}, {title:'Gas'}, {title:'Water'}] 

# simplified version, but should prove the point 
app.form_view = Ember.View.create 
    templateName: 'views_form' 
    type: null 
    submitEntry:() -> 
    console.log this.$().find(":selected").val() 

Spero che questo aiuti.

Answer 3

Questa non è una risposta, solo un correggi il link jsfiddle rotto .. Apparentemente jsfiddle non ha amore per la brace:/Ma JsBin sì! http://jsbin.com/kuguf/1/edit