Wie binden Wert form input select-Attribut im controller

Ich versuche, eine Bindung mit dem Wert aus dem input select-Attribut "selectedValue" im controller.

Dies ist app.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"}));

Dies ist index.html

{{#collection
    contentBinding="Todos.todosController"
    tagName="select"
    itemClassBinding="content.isDone"}}
  {{content.title}}
{{/collection}}

Ausgabe wie folgt Aussehen

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

Ich habe keine Ahnung, wie Sie Wert hinzufügen, um die option und wie verbindlich gewählten Wert zurück zu controller.
Ist das möglich zu tun, Emberjs?

InformationsquelleAutor Bank | 2011-12-16

ember.js

Ember hat jetzt eine built-in Wählen Sie " Ansicht.

Finden Sie in der neuesten Ember.js hier bauen: http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js

Hier ist ein Beispiel für die Benutzung:

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

Ihre Vorlage Aussehen würde:

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

Wieder, hier ein jsFiddle Beispiel: http://jsfiddle.net/ebryn/zgLCr/

sollte fügen Sie diese Ansicht, um Glut-Kern 🙂
Ich habe eine verbesserte version enthalten sein werden mit Ember bald: github.com/emberjs/ember.js/pull/424
btw, dies ist die Ember.Wählen Sie api
ich habe die seltsamste déjà vu jetzt
Ember.Select ist jetzt veraltet. Was ist der aktualisierte Weg, dies zu tun?

InformationsquelleAutor ebryn

5

Springen aus von der Lösung für @pangrantz, diese Geige Beispiel (http://jsfiddle.net/bsyjr/) zeigt einige Verbesserungen: Der LENKER, der code ist sauberer, die durch die Nutzung der tagName. Wenn tagName auf "wählen", das untergeordnete Ansichten automatisch auf "option" - Elemente. Siehe die Glut.CollectionView.CONTAINER_MAP in https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/collection_view.js zu verstehen, warum. Auf der Javascript-Seite, indem Sie eine itemViewClass, können wir hinzufügen, das value-Attribut des option-Elements.
```
<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"}));
```
Gibt es noch Raum für Verbesserungen in der event-handling, das nicht durch Glut-Ereignis-framework, und es würde sehr viel Sinn machen, um eine benutzerdefinierte geschrieben SelectView nicht nutzen LENKER, da IMO es ist bedenklich, wie viel Wert LENKER fügt in diesem Fall.
- Es ist erwähnenswert, dass die {{#collection}} Helfer ist veraltet, wie die gleichen Ergebnisse erzielt werden können, mit größerer Klarheit über {{#each}} wie @pangratz hat.
- Weitere Klarstellungen zu liefern, gibt es immer noch einige Orte, wo {{#collection}} nützlich ist. Allerdings würde ich versuchen, mit {{#each}} erste und wenn es Ihnen nicht gelingt, die Ergebnisse, die Sie wollen, dann betrachten Sie {{#collection}} wir planen weitere Verbesserungen zu erzielen, um {{#each}} für weitere Fälle.
InformationsquelleAutor Luke Melia

Mithilfe einer benutzerdefinierten Ember.Funktioniert für mich, aber ich denke, es ist eine bessere Lösung...

Siehe Beispiel arbeiten ist diese Geige http://jsfiddle.net/pangratz/hcxrJ/

LENKER:

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

Diese Lösung funktioniert gut für mich aus mehreren Gründen: a) Die Glut.Wählen Sie " Ansicht zurück gibt, der das ganze Objekt im Inhalts-array als ausgewählten Wert, während ich bin nur daran interessiert, den tatsächlichen Wert wählen. b) Für das, was ich arbeite diese Umsetzung ist viel schneller: ich brauche nicht die Bindungen auf die Beschriftungen und Werte, Sie ändern sich nicht (ich entfernt die valueChanged-Methode in der view-Klasse-Erweiterung darüber, weil ich brauchte es nicht) Letzte Anmerkung : das ändern der handler-Methode enthält einen kleinen Fehler (wenn man mehrere Selektoren): $('wählen Sie Optionen... sollte selbst.$('wählen Sie Optionen...

InformationsquelleAutor pangratz

1

Ich bin mir nicht sicher, ob dies ist der Einsatz für andere, aber ich habe etwas ähnliches auf der Grundlage der Antworten hier, und dieses SelectView, dass, sollte in diesem Zusammenhang auch. Es bindet an 'change', Werke aus der Ansicht, dass die derzeit ausgewählt ist, und dann tut etwas mit seinem Inhalt.
```
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);
  }
});
```
Diese Weise werden Sie in der Lage, übergeben, um ein Objekt herum, anstatt den index der wählen Sie.

InformationsquelleAutor stef

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.