1

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

带有模型的文件：

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);

我忘记了什么吗？

4

1 回答 1

0

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

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

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

集合中的主干事件旨在与精确的 REST API 实践一起使用。Model属于 a 的ACollection将继承它的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 似乎不适用于这种工作流程。一个可以让你的数据保持更新的补丁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());
于 2013-07-09T23:40:50.380 回答