Javascript （重新）在更改事件处理程序中呈现主干视图不起作用

我有两个表单元素，都是通过backbone.stickit进行双向数据索引的。 第二个表单元素输入只是化妆品，用于显示它的实际工作情况

这样做的目的是，每当下拉选择菜单中的选项发生更改时，我的视图都会被重新命名

我试图通过捕获select的“changed”事件并调用this.render来重新渲染视图来实现这一点

显然这不管用。所选选项没有保存回模型中，我无法理解原因

我不是在寻找一个解决方案，而不是解释为什么下面的代码不起作用。解决方案如：为我工作是小提琴的一部分-注释掉

HTML:

JavaScript:

Foo = Backbone.Model.extend({
  defaults: {
    select: "",
    input: "",
  }
});
FooView = Backbone.View.extend({
  el: '#ctr',
  template: _.template($('#tpl').html()),
  initialize() {
    this.model.bind('change', function() {
      console.log("model change:");
      console.log(this.model.get('select'));
      console.log(this.model.get('input'));
    }, this);
    //this.model.bind('change:select', function() { this.render(); }, this); // <--------------------- WORKS
  },
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    this.stickit();
    return this;
  },
  events: {
    'change #select': function(ev) {
      console.log('change event triggered:');
      console.log(this.model.get('select'));
      console.log(this.model.get('input'));
      this.render(); // <--------------------- DOES NOT WORK - WHY?
    },
    /* 'click #render': function(ev) {
      console.log('render event triggered:');
      console.log(this.model.get('select'));
      console.log(this.model.get('input'));
      this.render();
    } */
  },
  bindings: {
    '#input': 'input',
    '#select': {
      observe: 'select',
      selectOptions: {
        collection: function() {
          return [{
            value: '1',
            label: 'Foo'
          }, {
            value: '2',
            label: 'Bar'
          }, {
            value: '3',
            label: 'Blub'
          }]
        }
      }
    },
  },
});
new FooView({
  model: new Foo()
}).render();

---

从更改选择事件处理程序中调用this.render不起作用的原因是您正在中断提供给您的双向数据绑定。流程如下所示：

用户更改“选择”的值。 您的更改选择处理程序将激发并调用this.render。 “渲染”使用新的“选择”菜单（不带选定选项）重新填充ctr。 Backbone.stickit响应要选择的更改。 Backbone.stickit尝试获取select的值，但由于它不包含选定选项，因此该值未定义。 Backbone.sticket将模型的“选择”属性设置为“未定义”。

---

如果您将this.render调用移动到模型的change:select处理程序中，则其工作的原因是Backbone.stickit能够正确更新模型，而不会在DOM更改之前进行更改

谢谢你的解释。通过模型执行此操作。绑定“更改：选择”是执行此操作的正确方法吗？如果您希望在更改选择时重新渲染，则选择“是”。非常感谢！

Foo = Backbone.Model.extend({
  defaults: {
    select: "",
    input: "",
  }
});
FooView = Backbone.View.extend({
  el: '#ctr',
  template: _.template($('#tpl').html()),
  initialize() {
    this.model.bind('change', function() {
      console.log("model change:");
      console.log(this.model.get('select'));
      console.log(this.model.get('input'));
    }, this);
    //this.model.bind('change:select', function() { this.render(); }, this); // <--------------------- WORKS
  },
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    this.stickit();
    return this;
  },
  events: {
    'change #select': function(ev) {
      console.log('change event triggered:');
      console.log(this.model.get('select'));
      console.log(this.model.get('input'));
      this.render(); // <--------------------- DOES NOT WORK - WHY?
    },
    /* 'click #render': function(ev) {
      console.log('render event triggered:');
      console.log(this.model.get('select'));
      console.log(this.model.get('input'));
      this.render();
    } */
  },
  bindings: {
    '#input': 'input',
    '#select': {
      observe: 'select',
      selectOptions: {
        collection: function() {
          return [{
            value: '1',
            label: 'Foo'
          }, {
            value: '2',
            label: 'Bar'
          }, {
            value: '3',
            label: 'Blub'
          }]
        }
      }
    },
  },
});
new FooView({
  model: new Foo()
}).render();