骨架.js模型不觸發事件

Question

我有一個似乎不想渲染的視圖，因為模型的change事件沒有觸發。

這是我的模型：

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

我猜這是關於設置模型的屬性-名稱不是標准屬性，也不是您定義模型的方式，它似乎可以通過使用model.name直接訪問。 model.name和主干不允許該AFAIK。 這是有效的更改：)您也可以看到相關的小提琴 ：)

$(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（[選項]）
從服務器重置模型的狀態。 如果模型從未填充過數據，或者您想確保自己具有最新的服務器狀態，則很有用。 如果服務器的狀態不同於當前屬性，將觸發“更改”事件。 接受選項哈希中的成功和錯誤回調，這些回調作為參數傳遞（模型，響應）。

因此，如果從服務器獲取的值與默認值不同，則將觸發change事件，因此您無需自己進行操作。 如果您確實希望發生這樣的事件，則可以使用觸發方法，但是可以自定義名稱，因為它特定於您的應用程序。 可以這么說，您基本上是在嘗試使事件超載。 完全可以，但是只是一個想法。

更改

model.change（）
手動觸發“更改”事件。 如果已經將{silent：true}傳遞給set函數以聚合對模型的快速更改，則需要在完成后調用model.change（）。

僅當您通過將silent:true作為參數傳遞給模型的set方法來抑制該事件時，才手動觸發change事件。

您可能還需要查看主干文檔中的“ 已更改 ”和其他事件。

編輯忘記為上述示例添加更新的小提琴 -您可以看到，通過顯式調用set更改模型時，警報框會彈出兩次-提取時也會發生同樣的情況。 因此，關於您“可能不需要”在執行操作時手動觸發“更改”這一事實的評論：)

Answer 2

您不需要像建議的博士那樣預定義屬性。 您需要將上下文傳遞給' this.model.bind('change', this.render, this); - 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

我的添加問題已解決

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