Question

我正在尝试从这个tutorial了解这个示例骨干代码，但我无法理解为什么我们需要这个dummy function - 任何想法是什么？

  Backbone.sync = function(method, model, success, error){
    success();
  }

然后，remove和unrender函数似乎是相同的 - 为什么我们需要它们？

这一行是什么，

this.model.bind('remove', this.unrender);

虽然我们已将remove函数和click事件绑定到dom？

另外，我们已经在这一行中绑定了所有函数（包括unrender），

_.bindAll(this, 'render', 'unrender', 'swap', 'remove');

那么我们为什么需要这一行呢？

this.model.bind('remove', this.unrender);

你可以阅读上面那个教程中的完整代码，这里有一些代码，

// `Backbone.sync`: Overrides persistence storage with dummy function. This enables use of `Model.destroy()` without raising an error.
  Backbone.sync = function(method, model, success, error){
    success();
  }

  var Item = Backbone.Model.extend({
    defaults: {
      part1: 'hello',
      part2: 'world'
    }
  });

  var List = Backbone.Collection.extend({
    model: Item
  });

  var ItemView = Backbone.View.extend({
    tagName: 'li', // name of tag to be created
    // `ItemView`s now respond to two clickable actions for each `Item`: swap and delete.
    events: {
      'click span.swap':  'swap',
      'click span.delete': 'remove'
    },
    // `initialize()` now binds model change/removal to the corresponding handlers below.
    initialize: function(){
      _.bindAll(this, 'render', 'unrender', 'swap', 'remove'); // every function that uses 'this' as the current object should be in here

      this.model.bind('change', this.render);
      this.model.bind('remove', this.unrender);
    },
    // `render()` now includes two extra `span`s corresponding to the actions swap and delete.
    render: function(){
      $(this.el).html('<span style="color:black;">'+this.model.get('part1')+' '+this.model.get('part2')+'</span> &nbsp; &nbsp; <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>');
      return this; // for chainable calls, like .render().el
    },
    // `unrender()`: Makes Model remove itself from the DOM.
    unrender: function(){
      $(this.el).remove();
    },
    // `swap()` will interchange an `Item`'s attributes. When the `.set()` model function is called, the event `change` will be triggered.
    swap: function(){
      var swapped = {
        part1: this.model.get('part2'),
        part2: this.model.get('part1')
      };
      this.model.set(swapped);
    },
    // `remove()`: We use the method `destroy()` to remove a model from its collection. Normally this would also delete the record from its persistent storage, but we have overridden that (see above).
    remove: function(){
      this.model.destroy();
    }
  });

Answer 1

教程中存在dummy function，因此可以在没有API的情况下使用某些Backbone函数与服务器通信以添加/更新/删除数据。当您调用Model.destroy()时，Backbone默认会向您的服务器发送DELETE请求。如果您未在模型中指定网址，则会引发错误。通过放入虚函数，它会覆盖尝试向URL发送请求的默认操作，本教程中不存在该操作;相反，它只是模拟HTTP请求成功，即使它实际上没有调用服务器。

this.model.bind('remove', this.unrender);会在删除模型时进行侦听，并在视图中调用unrender函数，这会删除模型与之关联的视图。基本上，模型在删除后会发出一个“删除”事件，该事件会被此绑定拾取。

如果你在任何这些函数中使用_.bindAll(this, 'render', 'unrender', 'swap', 'remove');（渲染，渲染，交换，删除），那么

this就是这样。根据功能，this可能会丢失上下文并引用除视图之外的其他内容。这可确保this始终引用视图。

Answer 2

不要混淆Underscore的bindall和Backbone的bind，因为它们的用途完全不同。

_.bindall(this, ...)为每个事件设置上下文，以便在调用处理程序时，this（在本例中为视图）作为上下文传递。

this.model.bind('remove', this.unrender)绑定事件处理程序，以便在删除模型时调用this.unrender，从而触发remove事件。

通常sync会调用您的数据存储;虚函数直接调用成功回调，以便调用成功。

Answer 3

_.bindAll（） - 函数是一个Underscore.js函数，用于设置函数的范围（即定义“this”）

设置

_.bindAll(this, 'render', 'unrender', 'swap', 'remove');

确保使用ItemView实例执行“render”，“unrender”，“swap”和“remove”等函数为“this”

另一方面，行this.model.bind('remove', this.unrender);将模型上的remove事件绑定到unrender-function。

this.model.bind的使用已经被this.model.on所取代，它还采用了第三个参数，即范围。

因此，您可以安全地从_.bindAll中删除'render'和'unrender'并执行

  this.model.on('change', this.render, this);
  this.model.on('remove', this.unrender, this);

据我了解，你本可以做到：

remove: function(){
  $(this.el).remove();
  this.model.destroy();
}

并跳过this.model.on('remove', this.unrender, this);，因此取消了取消功能。但是，使用示例中使用的方法，只要在模型中调用destroy（），视图就会从DOM中移除自身，因此它更通用

骨干教程：model.destroy +删除和取消函数

3 个答案: