2012-01-18 27 views
19

Próbuję utworzyć wejście select i przekazać wybrany obiekt do zdarzenia zmiany w widoku. Przykład kontaktu z emberem jest następujący: <ul>, ale po wybraniu widok musi znajdować się poza nim, w przeciwnym razie zmiana nie zostanie wywołana.wybierz rozwijane z ember

Tu jest widok JS:

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

ul z przykładu działa:

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

Ale jeśli zastąpić HTML bezpośrednio, wydarzenie zmiana nie jest zwolniony (co ma sens)

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

Więc myślę select musi być opakowane w widoku .. w takim przypadku jak mogę zdać odpowiedni obiekt ... Ten kod powoduje całego zespołu są przekazywane:

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

@drożenie linku było użyteczne, chociaż górna odpowiedź używa wycofanej kolekcji, a druga odpowiedź zwraca wartość, a nie obiekt. Stworzyłem to skrzypce [link] (http://jsfiddle.net/haydenchambers/Kekj3/), które zwraca obiekt, ALE przechodzi przez indeks wewnątrz zaznaczenia, więc nie mogę grupować ich według typów wewnątrz optgroups (mój cel końcowy) –

Odpowiedz

36

Ember ma teraz wbudowany widok Wybierz.

Oto przykład użycia:

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

Szablon wyglądałby następująco:

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

Ponownie, oto jsFiddle przykład: http://jsfiddle.net/ebryn/zgLCr/

+10

fantastyczny ! Mam nadzieję, że tego rodzaju przykłady zostaną dodane do strony emberjs, to sprawiłoby, że proces uczenia się stałby się o wiele mniej bolesny. –

+0

coś takiego powinno zdecydowanie wejść w sedno - podobnie jak Em.Button –

+2

Dzięki za skrzypce. Ponieważ był połączony z ember-latest, potrzebował aktualizacji skryptów. Zmieniłem go, aby używać jQuery 1.8.3 i Handlebars 1.0.beta.6: http: // jsfiddle.net/zgLCr/622/ –

2

Sprawdź odpowiedzi na podobne pytanie: How to bind value form input select to attribute in controller

W przykładach CollectionView jest używany z zmiennej = Wybierz. Może się okazać to pomocne w uzyskaniu jej działania.

EDIT: Ponieważ szukałem wdrożyć wybrać sobie, oto rozwiązanie wymyśliłem:

poglądów/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}} 

select jest częścią Formularz. Mam sprawdzić przypadku złożenia i tam odczytać wartość:

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

nadzieję, że to pomaga.