Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/backbone.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Backbone.js 主干收集更改不会发生';更改模型时不会触发_Backbone.js - Fatal编程技术网

Backbone.js 主干收集更改不会发生';更改模型时不会触发

Backbone.js 主干收集更改不会发生';更改模型时不会触发,backbone.js,Backbone.js,我正在构建一个在API上具有主干的前端,我想知道为什么change事件没有被触发。获取和保存工作正常,但模板不会重新提交 收藏 var Clients = Backbone.Collection.extend({ url: API.host + '/clients', model: Client }); 型号 var Client = Backbone.Model.extend({ urlRoot: API.host + '/clients', defaults: {

我正在构建一个在API上具有主干的前端,我想知道为什么
change
事件没有被触发。获取和保存工作正常,但模板不会重新提交

收藏

var Clients = Backbone.Collection.extend({
  url: API.host + '/clients',
  model: Client
});
型号

var Client = Backbone.Model.extend({
  urlRoot: API.host + '/clients',
  defaults: {
    clients: {
      number: '',
      company: '',
      address1: '',
      address2: '',
      city: '',
      zip: '',
      country: '',
      tax: '',
      email: '',
      phone: ''
    }
  }
});
查看

var ClientsView = Backbone.View.extend({

  id: 'content',

  initialize: function() {

    // instantiate Collection
    this.model = new Clients();

    // compile Handlebars template
    this.tpl = Handlebars.compile(this.template);

    // bind change and reset model events to rerender template
    this.model.bind('change', this.render);
    this.model.bind('reset', this.render);
  },

  render: function() {

    var self = this;
    var obj = this.el;

    // get clients and set data to handlebars template
    $.when(this.model.fetch()).then(function(response) {
      $(obj).html(self.tpl(response));
    }, function() {
      $(obj).html(self.tpl);
    });

    return this;
  },

  events: {
    "click #client-save": "save"
  },

  save: function(e) {

    // cache target and parent object for quick form access
    var obj = e.target;
    var parent = $(obj).closest('#client-modal');

    var client = new Client({
      clients: {
        number: parent.find('[name="number"]').val(),
        company: parent.find('[name="company"]').val(),
        address1: parent.find('[name="address1"]').val(),
        address2: parent.find('[name="address2"]').val(),
        city: parent.find('[name="city"]').val(),
        zip: parent.find('[name="zip"]').val(),
        country: parent.find('[name="country"]').val(),
        tax: parent.find('[name="tax"]').val(),
        email: parent.find('[name="email"]').val(),
        phone: parent.find('[name="phone"]').val(),
        web: parent.find('[name="web"]').val()
      }
    });

    client.save();

    return false;

  }

});

绑定函数时需要传递上下文

this.model.bind('change',this.render,this

尝试为集合实例使用其他名称

// Example
this.collectionClients = new Clients();

\0/

this.model.bind('change',this.render,this)
成功了!:)但是为什么我应该为我的集合实例使用另一个名称呢?当您在视图中创建名为model的变量时,convention主干将假定您的视图中附加了一个模型,而该模型不是您的cenario。
this.collection
将是视图中集合属性的常用名称,它甚至具有与此.model相同的特殊处理。通常是一种比绑定
更好的连接事件的方法。