Le modèle commun pour le remplissage de sélectionner les données de la liste de la colonne vertébrale point de vue?

Ma colonne vertébrale application dispose de plusieurs points de vue qui contient des formulaires avec des saisies de texte sélectionner les champs et cases à cocher. La sélectionner les champs doivent être remplis à l'aide de données à partir de mon API. Un champ de sélection peuvent être réutilisées dans plusieurs différentes formes.

Ce qui est communément utilisé pour le remplissage de ces listes déroulantes? Voici une solution que j'ai truqué...est-il une approche commune?

Réutilisables sélectionnez le champ qui remplit itself...app/views/shared/location_selection.js:

define([
  'jquery',
  'backbone',
  'app/views/base',
  'app/collections/location'
], function($, Backbone, BaseView, LocationCollection) {
  'use strict';

  return BaseView.extend({
    initialize: function(options) {
      this.options = options || {};
      this.options.id = this.options.id || 'location';
      this.options.showBlank = typeof this.options.showBlank != 'undefined' ? this.options.showBlank : false;

      this.collection = new LocationCollection();
    },

    render: function() {
      this.setElement('<select id="' + this.options.id + '"></select>');

      var self = this;
      this.collection.fetch({
        success: function() {
          if (self.options.showBlank) {
            self.$el.append('<option></option');
          }

          self.collection.each(function(model) {
            self.$el.append('<option value="' + model.get('id') + '">' + model.get('name') + '</option>');
          });
        }
      });

      return this;
    }
  });
});

Et un extrait à partir d'un autre point de vue qui utilise ce point de vue:

render: function() {
  this.$el.html(this.template(this.model.toJSON()));

  var locationSelectionView = new LocationSelectionView({ showBlank: !this.model.get('id') });
  this.$('.location').append(locationSelectionView.render().el);

  return this;
},

Et le modèle de formulaire:

<form role="form">
  <div class="form-group">
    <label for="imei">IMEI</label>
    <input type="text" class="form-control" id="imei" value="{{data.imei}}" />
  </div>
  <div class="form-group location">
    <label for="location">Location</label>
  </div>
  <div class="checkbox">
    <label><input id="master" type="checkbox"{{#if master}} checked="checked"{{/if}} /> Master</label>
  </div>
</form>

OriginalL'auteur Chad Johnson | 2013-09-19

  1. 11

    Si vous avez des modèles distincts pour les deux votre point de vue et la vue de collection, vous pouvez le faire de cette façon:

    var ItemView = Backbone.View.extend({
    tagName: 'option',
    initialize:function(){        
        this.template= _.template($('#menu_item_view').html());    
    },    
    render:function(){        
        this.$el.html(this.template(this.model.toJSON()));        
        return this;        
    }
});

var CollectionView = Backbone.View.extend({
    tagName: 'select',
    initialize:function(){        
        this.collection = new ItemCollection();            
        this.collection.on('sync',this.render,this);            
        this.collection.fetch();
    },    
    render:function(){        
        _.each(this.collection.models,function( item ){            
            this.$el.append(new ItemView({model:item}).render().el );        
        },this);      
        return this;        
    }
});

    Edit: juste une remarque, avant de la Dorsale 1.0 lorsque vous avez appelé la chercher à utiliser pour déclencher des "reset" mais maintenant, il déclenche "sync" à moins que vous écrivez fetch({reset:true}). Donc, en fonction de la version de colonne vertébrale, vous êtes en cours d'exécution, être conscient de cela.

    Cela a aidé beaucoup. Je vous remercie.
    écrit cela.$el.html(ce.collection.map(function(modèle){return new ItemView({modèle:élément}).render().el;}); en général, mieux?
    Hmm. Intéressant. Semble un peu lourd pour instancier un nouvel objet de vue pour chaque option, cependant. Et il faut le code html d'un modèle.

    OriginalL'auteur redconservatory