Question

我有一些模型，我希望在更改时将渲染方法绑定到它。我正在尝试将 model.toJSON 传递给渲染，但它不起作用。但是，如果我传递模型并在渲染中应用 toJSON ，它就会起作用。

（整个代码在这里：http://plnkr.co/edit/xoeY4hexnqgHnkxap5uj?p=preview）

window.onload=function(){

    var defaultModel = Backbone.Model.extend({
        defaults: {
          greeting: 'Hello, Dude',
          content: 'Coming soon...'
        }
      }),

      defaultView = Backbone.View.extend({
        tagName: 'section',
        className: 'default',
        initialize: function(option) {

          this.template = $('#tmpl-default').html();

          this.render();

          var _this = this;

          this.model.bind('change', _.bind(this.render, this, this.model.toJSON()));

          $('[name="default-input"]').on('blur', function() {
           console.log('got blurred....');
           _this.model.set('content', this.value);
          });
        },
        render: function(content) {
          if (!content) {
            console.log('%cno content', 'color: green');
            content = this.model.toJSON();
          }
          this.$el.html(_.template(this.template)(content));
          $('#content').html(this.$el);
          return this;
        }
      }),
      viewDefault = new defaultView({
        model: new defaultModel()
      });
};

上面的代码不起作用。如果我改变

this.model.bind('change', _.bind(this.render, this, this.model.toJSON()));

到

this.model.bind('change', _.bind(this.render, this, this.model));

和

if (!content) {
    content = this.model.toJSON();
}

到

if (!content) {
    content = this.model.toJSON();
}else{
    content = content.toJSON();
}

但为什么？！

Answer 1

更合适的方法是在视图上使用listenTo函数，例如：

this.listenTo(this.model, "change", this.render);

Answer 2

我认为它没有像你期望的那样工作的原因是因为当你做

时

this.model.bind('change', _.bind(this.render, this, this.model.toJSON()));

传递给render方法的参数this.model.toJSON()将始终是调用_.bind时模型的初始状态。

当您在content = this.model.toJSON();方法中render时，您将获得当前状态，包括触发渲染的预期更改。

您可以更好地构建您的视图：

defaultView = Backbone.View.extend({
  tagName: 'section',
  className: 'default',
  initialize: function(option) {
    this.render();
    this.model.on('change', _.bind(this.render, this));
  },
  template: _.template($('#tmpl-default').html()),
  events: {
    'blur [name="default-input"]': 'eventHandler'
  },
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    $('#content').html(this.$el);
    return this;
  },
  eventHandler: function(event) {
    var val = $(event.currentTarget).val();
    this.model.set('content', val);
  }
});

另外，调查listenTo而不是on，就像@Jayem建议的那样，可以避免意外的内存泄漏问题

backbonejs model.toJSON＆amp;给予

2 个答案: