7

我的代码：

我是 Backbone.js 的新手，正在尝试使用 Backbone.js 和 PHP 构建应用程序。当我尝试调用add路由器时，出现错误：

未捕获的类型错误：对象 [object Object] 没有方法“设置”。

请帮我找出我的错误。

谢谢。

    // Models
    window.Users = Backbone.Model.extend({
        urlRoot:"./bb-api/users",
        defaults:{
            "id":null,
            "name":"",
            "email":"",
            "designation":""
        }
    });

    window.UsersCollection = Backbone.Collection.extend({
        model:Users,
        url:"./bb-api/users"
    });


    // Views


    window.AddUserView = Backbone.View.extend({

        template:_.template($('#new-user-tpl').html()),

        initialize:function(){
            this.model.bind("click", this.render, this);
        },

        render:function(){
            $(this.el).html(this.template(this.model.toJSON()));
            return this;
        },

        events:{
            "click .add":"saveUser"
        },

        saveUser:function(){ alert('saveUser');
            this.model.set({
                name:$("#name").val(),
                email:$("#email").val(),
                designation:$("#designation").val()
            });

            if(this.model.isNew()){
                this.model.create(this.model);
            }
            return false;
        }
    });


    // Router
    var AppRouter = Backbone.Router.extend({

        routes:{
            "":"welcome",
            "users":"list",
            "users/:id":"userDetails",
            "add":"addUser"
        },


        addUser:function(){ 
            this.addUserModel = new UsersCollection();
            this.addUserView = new AddUserView({model:this.addUserModel});
            $('#content').html(this.addUserView.render().el);
        }


    });

    var app = new AppRouter();
    Backbone.history.start();
4

2 回答 2

1

正如评论中所建议的，问题从这里开始：

this.addUserModel = new UsersCollection();
this.addUserView = new AddUserView({model:this.addUserModel});

并在这里完成：

saveUser:function(){ alert('saveUser');
    this.model.set({

通过传递集合代替模型会造成混乱，结果是稍后在saveUser函数中您尝试在实例上调用Backbone.Model方法 ( set) 。Backbone.Collection

注意：从 1.0.0 版开始，Backbone.Collection现在有一个set方法。在以前的版本中，例如问题作者使用的版本，该方法被称为update.

您可以采取几个步骤来澄清此代码。对于初学者，我将重命名您的模型和集合类，以便清楚模型是单数形式而集合是复数形式：

window.Users=>window.User

window.UsersCollection=>window.Users

接下来，我将创建一个新User模型，而不是一个Users集合，并将其传递给您的视图：

this.addUserModel = new User();
this.addUserView = new AddUserView({model:this.addUserModel});

最后，我会删除这些行：

if(this.model.isNew()){
    this.model.create(this.model);
}

一方面，模型将始终是新的（因为您只是在传递它之前创建它），但更重要的是，您不需要调用Collection'screate方法，因为该方法会创建一个新模型，而您已经创建了一个模型. 也许您应该添加的是：

this.model.save();

如果您的意图是将模型保存到您的服务器。

由于您已经为模型指定了 a urlRoot，因此您应该只需要创建一个新模型，将其传递给您的视图，让您的视图根据 DOM 元素填充其属性，最后将该模型的属性保存到您的服务器。

于 2014-09-27T04:19:08.983 回答
0

我认为您面临对象范围的问题。当事件触发时，它会将事件对象发送到该函数。试试这个它可能会用初始化中的当前视图声明全局变量

initialize : function(){ self = this; }

然后将其更改为自我，

       saveUser:function(){ alert('saveUser');
        self.model.set({
            name:$("#name").val(),
            email:$("#email").val(),
            designation:$("#designation").val()
        });

        if(self.model.isNew()){
            self.model.create(this.model);
        }
        return false;
    }
于 2015-07-06T06:30:30.093 回答