javascript - 单击删除按钮时删除相应的项目。 Backbone

Question

我目前正在学习 BackboneJs 并试图了解 Backbone 如何处理事件。我有一个简单的项目列表，每个项目旁边都有一个删除按钮。我试图找出为什么在控制台中注册了单击事件(删除按钮)但该项目没有被删除。这是我所拥有的:

var Vehicle = Backbone.Model.extend();
var Vehicles = Backbone.Collection.extend({
    model: Vehicle
});


/*************
single view
**************/
var VehicleView = Backbone.View.extend({
    tagName: 'li',
    className: 'vehicle',
    render: function() {
        this.$el.html(this.model.get("title") + " Registration Number is: " + this.model.get("regiNum") + " <button class='delete-btn'>Delete</button>");
        this.$el.attr("id", this.model.id);
        return this;
    }
});

/*************
Collection View
*************/
var VehiclesView = Backbone.View.extend({
    tagName: "ul",
    initialize: function() {
        this.model.on('remove', this.vehicleRemove, this);
    },
    events: {
        "click .delete-btn": "vehicleRemove"
    },
    vehicleRemove: function(vehicle) {
        this.$("li#" + vehicle.id).remove()  // this is not working. the item is not being removed
        console.log('Delete button clicked')    // this is registered in the console log
    },

    render: function() {
        var self = this;
        this.model.each(function(vehicle) {
            var vehicleView = new VehicleView({
                model: vehicle
            });
            self.$el.append(vehicleView.render().$el);
        })
    }
});


var vehicles = new Vehicles([
    new Vehicle({
        id: 1,
        title: "Toyota",
        regiNum: "453454624"
    }),
    new Vehicle({
        id: 2,
        title: "Honda",
        regiNum: "daf4526"
    }),
    new Vehicle({
        id: 3,
        title: "Audi",
        regiNum: "jlkjfa34"
    })
])

var vehiclesView = new VehiclesView({
    el: "#container",
    model: vehicles
});
vehiclesView.render();

请帮助我或为我指明正确的方向，我们将不胜感激。

Answer 1

既然你有一个项目 View ，最好给它提供删除自身的功能。这样您就不必从 DOM 中读取内容来根据单击的项目 View 元素查找相关模型。

此外，您应该使用 Backbone.View 的 remove() 方法，而不是 jQuery remove() 方法，因为它可以安全地删除在 Backbone.View 上注册的主干事件。 view，以及调用 jQuery remove() 从 DOM 中删除元素。

您可以调用model.destroy()，这将向您的持久层发出信号以删除模型并将其从集合中删除。由于在此示例中没有持久层，因此我在项目 View 的模型上触发一个自定义事件，该事件在集合中进行处理，以便从中删除模型(模型事件传播到其集合)。

不需要自己手动初始化集合中的模型，backbone会自动完成，这就是集合model属性的用途。

您应该使用某种模板引擎，而不是在 View 中进行字符串操作来进行渲染，无论如何，您都可以使用 _.template() 。

此外，正如 dskoda1 已经提到的，您不应该使用 model 选项传递 Backbone.Collection，模型和集合是 Backbone.view 将检测到的两个选项。即使它没有任何害处，但仍然很令人困惑。

var Vehicle = Backbone.Model.extend();
var Vehicles = Backbone.Collection.extend({
  model: Vehicle,
  initialize: function() {
    this.on('delete', this.remove);
  }
});
var VehicleView = Backbone.View.extend({
  tagName: 'li',
  className: 'vehicle',
  template: _.template($('#vehicle-template').html()),
  events: {
    "click .delete-btn": "vehicleRemove"
  },
  initialize: function() {
    this.render();
  },
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  },
  vehicleRemove: function(vehicle) {
    this.remove();
    //this.model.destroy(); /* The collection should have a url */
    this.model.trigger('delete', this.model);
  },
});
var VehiclesView = Backbone.View.extend({
  tagName: "ul",
  initialize: function() {
    this.render();
  },
  render: function() {
    this.collection.each(function(vehicle) {
      var vehicleView = new VehicleView({
        model: vehicle
      });
      this.$el.append(vehicleView.$el);
    }, this)
  }
});

var vehicles = new Vehicles([{
  id: 1,
  title: "Toyota",
  regiNum: "453454624"
}, {
  id: 2,
  title: "Honda",
  regiNum: "daf4526"
}, {
  id: 3,
  title: "Audi",
  regiNum: "jlkjfa34"
}]);

var vehiclesView = new VehiclesView({
  el: "#container",
  collection: vehicles
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<div id="container"></div>
<script type="text/template" id="vehicle-template">
  <%=title%>Registration Number is:
    <%=regiNum%>
      <button class='delete-btn'>Delete</button>
</script>