Question

我是backbone.js newbee。我的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 });

但是，这会创建新条目，但不会立即显示，我需要刷新页面才能看到新条目。我在模型的更改事件上调用render函数，所以这应该工作，对吧？另外，我在函数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 });

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

2 个答案: