如何在 Backbone.js 中为模型创建新条目时重新渲染视图？

Question

我是backbone.js 新手。 我的 Rails 应用程序中有一个书签模型。我正在尝试创建一个文本字段，当我在其中输入文本并单击提交按钮时，它应该创建条目并将其显示在视图中，这样我就不需要刷新页面来查看新条目。

我编写了以下 Backbone.js 代码：

var BookmarksModel=Backbone.Model.extend({
    urlRoot: "/bookmarks",
})

 var enterBookmarkView = Backbone.View.extend({
        el: $("#divForBookmarks"),
        events: {
            "click #submit" : "submitBookmark"
        },
        initialize: function(){

        this.model.bind('change',this.render)
        this.render();
        },
        render: function(){
            alert("Render Called!");
            var temp = _.template( $("#enterBookmark").html(), {} );
            $(this.el).html(temp);
            return this;
        },
        submitBookmark : function(){
            var BM={
                url: $("#bookmark").val(),
                tag_list: $("#tags").val()
            }
            this.model.save(BM);
            this.render();
        }
    });

var mymodel=new BookmarksModel();
var enter_bookmark_view = new enterBookmarkView({ model: mymodel });

但是，这确实会创建新条目，但不会立即显示，我需要刷新页面才能看到新条目。我在模型的更改事件上调用渲染函数，所以这应该可以工作，对吧？另外，我在函数 submitBookmark 中调用了它，以便在调用该函数时它至少重新呈现，但这也不起作用。另外，这是通过视图在模型中创建新条目的标准方式吗？

Answer 1

您可能想尝试的一件事是使用console.log() 或使用调试器逐步检查以确保this 具有您每次引用它时所期望的值。

如果您发现 this 在某处具有意外值，请查看 Underscore.js 的 bind()：http://underscorejs.org/#bind。

Answer 2

我认为您的绑定事件后缺少分号。 此外，在您的骨干模型的扩展中，该对象的逗号太多。这将在 Internet Explorer 中崩溃。

以下是您的代码更新：

 var BookmarksModel=Backbone.Model.extend({
     urlRoot: "/bookmarks"
 })

 var enterBookmarkView = Backbone.View.extend({
        el: $("#divForBookmarks"),
        events: {
            "click #submit" : "submitBookmark"
        },
        initialize: function(){

    this.model.bind('change', this.render);
    this.render();
    },
    render: function(){
        alert("Render Called!");
        var temp = _.template( $("#enterBookmark").html(), {} );
        $(this.el).html(temp);
        return this;
    },
    submitBookmark : function(){
        var BM={
            url: $("#bookmark").val(),
            tag_list: $("#tags").val()
        }
        this.model.save(BM);
    }
});

var mymodel=new BookmarksModel();
var enter_bookmark_view = new enterBookmarkView({ model: mymodel });