ember ile açılır açılır seçeneğini seçin

Question

Seçilmiş bir girdi oluşturmaya çalışıyorum ve seçilen nesneyi görünümdeki değişiklik olayına iletiyorum. Ember contact örneği, bir <ul> kullanır, ancak bir seçim ile görünümün her birinin dışında olması gerekir, aksi halde değişiklik bile atılmaz.

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

örnekten ul çalışır: Burada

görünüm js olan

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

Ama doğrudan html değiştirirseniz, değişiklik olayı (mantıklı) ateş edilmez

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

yüzden .. seçeneğini görünümde sarılmış olması gerekir sanırım bu durumda nasıl I do İlgili nesneyi geçmesi tüm dizide Bu kod sonuçları geçirilen ...:?

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

Answer 1

Ember şimdi yerleşik bir Seçme görünümüne sahiptir.

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

Şablon gibi görünecektir:: İşte

bir kullanım örneği http://jsfiddle.net/ebryn/zgLCr/

Answer 2

çek dışarı benzer bir soruya cevap: bir CollectionView bir tagName kullanılır örneklerde How to bind value form input select to attribute in controller

= seçin. Bunu işe almak için yararlı olabilir.

DÜZENLEME:

görüntüleme/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}} 

seçme bir parçasıdır Ben uygulamak isteyen beri bir kendim seçmek, burada ben ile geldi çözümdür form. Ben göndermeniz durumunda denetlemek ve orada değerini okuyun:

app.js.coffee bu yardımcı olur

# 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() 

Umut.

Answer 3

Bu cevap, sadece değildir: Yine

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

, burada bir jsFiddle örnek kırık jsfiddle linki üzerinde düzeltmek .. Görünüşe göre jsfiddle, ember için hiçbir aşkı yoktur:/Ama JsBin yapar!