Comment lier la valeur du formulaire de sélection d'entrée à l'attribut dans le contrôleur

J'essaie de lier la valeur de sélection d'entrée pour l'attribut "selectedValue" dans le contrôleur.

C'est 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"}));

C'est index.html

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

De sortie ressemble à ceci

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

Je n'ai aucune idée de comment ajouter de la valeur à l'option et comment lier la valeur sélectionnée au contrôleur.
Est-ce possible de le faire dans Emberjs?

OriginalL'auteur Bank | 2011-12-16

ember.js

De braise a maintenant un haut-Sélectionnez afficher.

Vous pouvez le trouver dans la dernière Ember.js construire ici: http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js

Voici un exemple d'utilisation:

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

Votre modèle:

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

Encore une fois, voici un jsFiddle exemple: http://jsfiddle.net/ebryn/zgLCr/

devrait ajouter ce point de vue à la Braise de base 🙂
J'ai une version améliorée qui sera inclus avec la Braise bientôt: github.com/emberjs/ember.js/pull/424
btw, c'est le Braise.Sélectionnez api
j'ai le plus étrange de déjà-vu dès maintenant
Ember.Select est maintenant obsolète. Qu'est-ce que la mise à jour de façon de le faire?

OriginalL'auteur ebryn

5

De sauter à partir de la solution de @pangrantz, ce Violon exemple (http://jsfiddle.net/bsyjr/) illustre quelques améliorations: Le Guidon code est plus propre grâce à l'utilisation de nom de balise. Lorsque tagName est réglé sur "select", l'enfant vues deviennent automatiquement "option" éléments. Voir la Braise.CollectionView.CONTAINER_MAP dans https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/collection_view.js de comprendre pourquoi. Sur le Javascript côté, en spécifiant une itemViewClass, nous pouvons ajouter de la valeur de l'attribut de l'élément.
```
<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"}));
```
Il y a encore de la place pour l'amélioration dans la gestion des événements, ce qui n'est pas à l'aide de Braise de l'événement de cadre, et il ferait beaucoup de sens d'utiliser un écrit sélectionnez afficher qui n'a pas d'effet de levier de Guidon, depuis l'OMI, il est plus que douteux quelle valeur Guidon ajoute dans ce cas.

Il est intéressant de noter que la {{#collection}} helper est obsolète que les mêmes résultats peuvent être obtenus avec une plus grande clarté à l'aide de {{#each}} @pangratz fait.
Pour fournir de plus amples précisions, il y a encore quelques endroits où {{#collection}} est utile. Cependant, je voudrais essayer d'utiliser {{#each}} d'abord, et si vous n'êtes pas en mesure d'obtenir les résultats que vous voulez, puis envisager de {{#collection}} nous avons l'intention d'apporter de nouvelles améliorations à {{#each}} qui devrait couvrir le plus de cas.

OriginalL'auteur Luke Melia

En utilisant une mesure de Braise.Vue fonctionne pour moi, mais je pense qu'il y a une meilleure solution...

Voir exemple de travail est ce violon http://jsfiddle.net/pangratz/hcxrJ/

Guidon:

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

Cette solution fonctionne bien pour moi pour plusieurs raisons: a) La Braise.Sélectionnez la vue donne à l'ensemble de l'objet dans le tableau comme valeur sélectionnée, tandis que je suis seulement intéressé à obtenir les sélectionner une valeur. b) Pour ce que je suis en train de travailler sur cette mise en œuvre est beaucoup plus rapide: je n'ai pas besoin de fixations sur les étiquettes et les valeurs, ils ne changent pas (j'ai enlevé le valueChanged méthode dans la classe de la vue de l'extension ci-dessus, car je n'en avais pas besoin) une dernière remarque : l'sélectionnez modifier la méthode de gestionnaire d'contient une petite erreur (lorsque vous avez plusieurs sélecteurs): $('sélectionnez options... doivent être autonomes.$('sélectionnez options...

OriginalL'auteur pangratz

1

Je ne sais pas si c'est de l'utiliser à d'autres, mais j'ai fait quelque chose de similaire sur la base des réponses ici, et ont fait de ce sélectionnez afficher qui doit travailler dans ce contexte. Il se lie à "modifier", fonctionne sur le point de vue qui est actuellement sélectionné et puis quelque chose avec son contenu.
```
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);
  }
});
```
De cette façon, vous êtes en mesure de passer autour d'un objet plutôt que de l'indice de la sélectionner.

OriginalL'auteur stef

Vous devez vous connecter pour publier un commentaire.