自动更新骨干集合

Question

我在重新渲染主干中的简单集合时遇到问题，渲染事件永远不会从侦听器中触发...我不确定错误在哪里，请有人帮助我吗？

模型文件：

window.MetricDevice = Backbone.Model.extend({
    defaults: {
      ip: null,
      framesReceived: null,
      framesOutOfOrder: null,
      framesLost: null
 }
});

window.MetricDevicesCollection = Backbone.Collection.extend({
  model: MetricDevice,
  value: null,
  url: function(){
      return hackBase + "/wm/iptv/metric/devices/json";  
  },
  initialize:function () { 
      this.fetch({ reset: true });
      console.log("data fetched");
  },      
});

渲染页面：

window.MetricItemView = Backbone.View.extend({
    events: {
        "click input[type=button]" : "removeDevice",
    },
    initialize:function(){
    this.template = _.template(tpl.get('metric-devices-item'));
        this.render();
},
removeDevice:function(){
    $.ajax({
        url:hackBase +  '/wm/iptv/metric/disable/' + this.model.get("ip") + '/0/json',
        dataType:"json",
        success:function (data) {
            if ( data.return == 1 ){
                alert(data.error);  
            }else{
                alert("Metric disabled in " + this.model.get("ip"));
            }
        },
    });
},
render:function(){      
    var ip = this.model.get("ip");
    console.log("rendering item in view " + ip);

},

});

window.MetricView = Backbone.View.extend({

events: {
    "click input[type=button]" : "add",
    "click input[type=img]" : "updateAll",
},
clicked:function(e){

},
updateAll:function(e){
    this.render();
},
initialize:function () {
    this.template = _.template(tpl.get('metric-devices-list'));
    this.model.bind("change", function(){
        console.log("metricView data change detected");
        this.render();
    });
    this.model.bind("reset", this.render());
},
add:function(e){
    if($(e.currentTarget).attr("name") == "add" ){
        var ip = document.getElementById('vaddress').value;
        var threshold = document.getElementById('vthreshold').value;
        $.ajax({
            url:hackBase +  '/wm/iptv/metric/enable/' + ip + '/' + threshold + '/json',
            dataType:"json",
            success:function (data) {
                if ( data.return == 1 ){
                    alert(data.error);  
                }else{
                    alert("Metric enabled in device");
                }
            },
        });
    }else if($(e.currentTarget).attr("name") == "cancel"){          
        document.getElementById('vaddress').value = "";
        document.getElementById('vthreshold').value = "";
    }
},    
render:function (eventName) {
    $(this.el).html(this.template());
    var list = $(this.el).find('#tableData');
    console.log("On render!");
    var subviews = [];
    console.log("looping on models");
    _.each(this.model.models, function (sw) {
       console.log("model loop " + sw.get("ip"));
       var m = new MetricItemView({model:sw, tagName: 'tbody', el: $(this.el).find('#tableData')});
       list.append(m.template(sw.toJSON()));
    }, this);

    return this;
},

});

问题是 MetricView 中的 render 方法在页面第一次加载时被调用，之后我的印象是 JSON 保持缓存，如果我关闭浏览器干净，内容就会改变缓存并再次运行...

控制台输出为：

On render! metricView.js:86
looping on models metricView.js:88
model loop 10.0.0.1 metricView.js:92
rendering item in view 10.0.0.1 metricView.js:26

我正在像这样实例化 MetricView

var metricdevices = new MetricDevicesCollection();
$('#content').html(new MetricView({model:metricdevices}).render().el);

我是不是忘记了什么？

Answer 1

您面临的问题是您没有充分发挥 Backbone 模型和集合的潜力。当您调用手动$.ajax(...) 时，不会触发任何 Backbone 事件。这里有一些建议可以使您的代码与 Backbone 集成。

首先，您应该使用正确的保留关键字来实例化您的视图：collection

var metricdevices = new MetricDevicesCollection();
$('#content').html(new MetricView({ collection : metricdevices }).render().el);

集合中的主干事件旨在与精确的 REST API 实践配合使用。属于Collection 的Model 将继承它的url 参数。它希望您的 REST API 映射到以下方案：

model.save()   --> model.id is present ? PUT collection.url/model.id : POST collection.url
model.delete() --> DELETE collection.url/model.id
model.fetch()  --> GET collection.url/model.id 

这个想法是您可以单独操作模型并在需要时使用集合来获取所有相关模型。您的 API 似乎不适用于这种工作流程。 monky 补丁可以让您的数据保持更新，当操作成功时触发集合的fetch。

var collection = this.collection;
$.ajax({
  //...
  success: {
    collection.fetch();
  }
}

由于您已经在监听 Backbone 事件，它将触发 reset 事件并呈现视图。请注意，这不是做事的好方法。您应该做的是重构您的服务器访问点，以符合标准的良好 REST 实践（如果您可以访问它）。如果不这样做，请使用正确的面向对象模式并在模型中实现模型行为。例如：

window.MetricDevice = Backbone.Model.extend({
    defaults: {
        ip: null,
        framesReceived: null,
        framesOutOfOrder: null,
        framesLost: null
    },
    enable : function() {
        var device = this,
            ip = this.ip,
            treshold = this.treshold;
        $.ajax({
            url:hackBase +  '/wm/iptv/metric/enable/' + ip + '/' + threshold + '/json',
            dataType:"json",
            success:function (data) {
                if ( data.return == 1 ){
                    alert(data.error);  
                } else {
                    device.trigger('change');                    
                    alert("Metric enabled in device");
                }
            }
        });
        return this;
    }
});

然后你就可以从视图中正确调用对象了：

var ip = document.getElementById('vaddress').value;
var threshold = document.getElementById('vthreshold').value;
var metricDevice = new MetricDevice({ ip : ip, treshold : treshold });
this.collection.add(metricDevice.enable());