backbone.js 模型不触发事件

Question

我有一个视图似乎不想渲染，因为模型的更改事件没有触发。

这是我的模型：

var LanguagePanelModel = Backbone.Model.extend({
    name:       "langpanel",
    url:        "/setlocale",
    initialize: function(){
        console.log("langselect initing")
    }
})

这是我的视图：

var LanguagePanelView = Backbone.View.extend({
    tagName:        "div",
    className:      "langselect",
    render:         function(){
        this.el.innerHTML = this.model.get("content");
        console.log("render",this.model.get(0))
        return this;
    },
    initialize : function(options) {
        console.log("initializing",this.model)
        _.bindAll(this, "render");
        this.model.bind('change', this.render);
        this.model.fetch(this.model.url);
  }
});

这是我实例化它们的方式：

if(some stuff here)
{
   lsm = new LanguagePanelModel();
   lsv = new LanguagePanelView({model:lsm});
}

我获取了初​​始化的日志，但没有获取视图渲染的日志？ 有什么想法吗？

Answer 1

我添加的问题已解决

var LanguagePanelModel = Backbone.Model.extend({
    //adding custom attributes to defaults (with default values)
    defaults: {
        name:       "langpanel",
        content:    "no content",
        rawdata:    "no data"
    },
    events:{
        //"refresh" : "parse"
    },
    url:        "/setlocale",
    initialize: function(){
        log("langselect initing");
        //this.fetch()
    },
    parse: function(response) {

        this.rawdata = response;
                // ... do some stuff
        this.trigger('change',this) //<-- this is what was necessary    
    }
})

Answer 2

与博士建议的不同，您不需要预定义属性。您需要将上下文传递给“bind” - this.model.bind('change', this.render, this);

请参阅 http://jsfiddle.net/7LzTt/ 或以下代码：

$(document).ready(function(){
    var LanguagePanelModel = Backbone.Model.extend({

        url:        "/setlocale",
        initialize: function(){
            console.log("langselect initing");
        }
    });

    var LanguagePanelView = Backbone.View.extend({
        el: $('#somediv'),

        initialize : function(options) {
            console.log("initializing",this.model);
            // _.bindAll(this, "render");
            //this.render();
            this.model.bind('change', this.render, this);
            //this.model.fetch(this.model.url);
        },

        render: function(){
            var c = this.model.get("content");
            alert(c);
            $(this.el).html(c);
            console.log("render",this.model.get(0));
            return this;
        }
    });

    var lpm = new LanguagePanelModel();
    var lpv = new LanguagePanelView({model:lpm});

    lpm.set({content:"hello"});    

}); //end ready

Answer 3

我想这是关于设置模型的属性 - name 不是标准属性，并且您定义它的方式，它似乎可以通过使用 model.name 直接访问，而主干不允许那个据我所知。以下是有效的更改:) 您也可以看到相关的 fiddle :)

$(document).ready(function(){
var LanguagePanelModel = Backbone.Model.extend({
    //adding custom attributes to defaults (with default values)
    defaults: {
        name:       "langpanel",
        content: "Some test content"  //just 'cause there wasn't anything to fetch from the server
    },

    url:        "/setlocale",

    initialize: function(){
        console.log("langselect initing"); //does get logged
    }
});

var LanguagePanelView = Backbone.View.extend({
    el: $('#somediv'), //added here directly so that content can be seen in the actual div

    initialize : function(options) {
        console.log("initializing",this.model);
        _.bindAll(this, "render");
        this.render(); //calling directly since 'change' won't be triggered
        this.model.bind('change', this.render);
        //this.model.fetch(this.model.url);
    },

    render: function(){
        var c = this.model.get("content");
        alert(c);
        $(this.el).html(c); //for UI visibility
        console.log("render",this.model.get(0)); //does get logged :)
        return this;
    }
});

var lpm = new LanguagePanelModel();
var lpv = new LanguagePanelView({model:lpm});

}); //end ready

更新：

您不需要手动触发更改事件 - 将其视为不好的做法。这是主干文档的内容（注意：获取也会触发更改！）

获取

model.fetch([选项])
从服务器重置模型的状态。
如果模型从未填充过数据，或者您想要
确保您拥有最新的服务器状态。 “改变”事件
如果服务器的状态与当前状态不同将被触发
属性。接受选项哈希中的成功和错误回调，
其作为参数传递（模型、响应）。

因此，如果从服务器获取的值与默认值不同，则会触发更改事件，因此您无需自己执行此操作。如果您确实希望有这样的事件，那么您可以使用触发器方法，但自定义名称，因为它特定于您的应用程序。可以这么说，您基本上是在尝试使事件超载。完全没问题，但只是一个想法。

改变

model.change()
手动触发“change”事件。 如果你曾经
将 {silent: true} 传递给 set 函数以聚合快速
对模型进行更改时，您需要调用 model.change()
完成了。

仅当您通过将 silent:true 作为参数传递给模型的 set 方法来抑制事件时，才需要手动触发更改事件。

您可能还想查看主干文档中的“已更改”和其他事件。

编辑忘记为上面的示例添加更新的小提琴 - 你可以看到当通过显式调用 set 更改模型时，警报框会弹出两次 - 获取时也会发生同样的情况。因此，关于您“可能不需要”需要像您所做的那样手动触发“更改”这一事实的评论:)