Често срещан модел за попълване на данни от списък за избор в изгледи на Backbone?

Приложението My Backbone има няколко изгледа, съдържащи формуляри с полета за избор на текст и квадратчета за отметка. Полетата за избор трябва да бъдат попълнени с помощта на данни от моя API. Дадено поле за избор може да се използва повторно в множество различни форми.

Какъв е често използваният подход за попълване на тези падащи менюта? Ето едно решение, което създадох заедно...има ли по-често срещан подход?

Поле за избор за многократна употреба, което се попълва...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;
    }
  });
});

И фрагмент от друг изглед, който използва този изглед:

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;
},

И шаблонът на формуляр:

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

javascript forms html-select backbone.js
person Chad Johnson    schedule 19.09.2013    source източник

Отговори (1)


arrow_upward
11
arrow_downward

Ако имате отделни шаблони както за вашия изглед на артикул, така и за изглед на колекция, можете да го направите по следния начин:

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

Редактиране: само като бележка, преди Backbone 1.0, когато извикахте fetch, той използваше за задействане на „нулиране“, но сега задейства „синхронизиране“, освен ако не напишете fetch({reset:true}). Така че в зависимост от версията на Backbone, която използвате, имайте предвид това.

person redconservatory    schedule 19.09.2013
comment
Това помогна много. Благодаря ти. - person Chad Johnson; 20.09.2013
comment
@redconservatory, пише това.$el.html(this.collection.map(function(model){return new ItemView({model:item}).render().el;}); като цяло по-добре? - person Alex Shilman; 29.07.2014
comment
Хм. интересно Все пак изглежда малко трудно да се създаде нов обект за изглед за всяка опция. И изважда html от шаблон. - person nroose; 24.10.2015