我使用backbone.js以及jquery和underscore.js
这是我的一些代码(它还没有做任何事情)。奇怪的是,点击 url“/#users”后没有错误。发生错误的唯一一次是当我单击转到不同的哈希,然后单击返回转到“/#users”时。这是我的代码的一部分,最后是接收错误的行Users = new Users();
错误显示“用户不是构造函数”:
var User = Backbone.Model.extend({
url: function(){return 'api/user/id/' + this.id;}
});
var Users = Backbone.Collection.extend({
model: User,
url: function(){return 'api/users';},
initialize: function() {
}
});
var UsersView = Backbone.View.extend({
initialize: function() {
this.users = this.options.users;
this.render();
},
render: function() {
_(this.users).each(function(){
// $('#app').append('here');
});
var template = _.template($('#usersTemplate').text());
$(this.el).html(template({users: this.users}));
$('#app').html(this.el);
}
});
var UserView = Backbone.View.extend({
initialize: function() {
this.user = this.options.user;
this.render();
},
render: function() {
var template = _.template("hello {{user.name}}");
$(this.el).html(template({user: this.user.toJSON()}));
$('#app').html(this.el);
}
});
var Controller = Backbone.Controller.extend({
routes: {
'dashboard' : 'dashboard',
'users' : 'showusers'
},
showuser: function(id) {
UserList.fetch({
success: function(){
new UserView({user: User});
},
error: function(){
alert('an error of sorts');
}
});
},
showusers: function() {
Users = new Users();
Users.fetch({
success: function(Users) {
new UsersView({users: Users});
},
error: function() {
}
});
},
dashboard: function() {
Users = new Users;
Users.fetch({
success: function() {
new UsersView({users: Users});
},
error: function() {
}
});
}
});
$(document).ready(function(){
var ApplicationController = new Controller;
Backbone.history.start();
});
如果您好奇的话,可以查看随附的 html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Administration Panel</title>
<!-- Framework -->
<script src="/javascripts/jquery.min.js"></script>
<script src="/javascripts/underscore.min.js"></script>
<script src="/javascripts/backbone.js"></script>
<!-- Application -->
<script src="/javascripts/application.js"></script>
<script id="usersTemplate" type="text/x-underscore-template">
asdf
</script>
</head>
<body>
<div>
<a href="#dashboard">Dashboard</a>
<a href="#users">Users</a>
<a href="#products">Products</a>
<a href="#orders">Orders</a>
<a href="#pages">Pages</a>
<a href="#settings">Settings</a>
</div>
<div id="app"></div>
</body>
</html>
new
只能与 Function 作为操作数一起使用。
new {} // Error: ({}) is not a constructor
检查类型Users
在上下文中:它是not引发该异常时的函数。
快乐编码
alert(typeof(Users))
应该可以解决问题。结果应该是“函数”才能用作构造函数。记下失败案例中的情况,并查看下面的原因。
一种有问题的场景(对于Users = new Users
) 可能是:一个对象是由 Function 构造的Users
然后对象(现在不是函数/构造函数)被分配回Users
所以接下来new Users
会去kaboom!(看看两个showusers
and dashboard
——是这样的行为吗really故意的?)
“正确”的代码可能是:var users = new Users; users.blahblah(...)
;也就是说,使用一个新的局部变量并且不要覆盖全局用户变量/属性。
仅当“返回”到“#foobar”(a片段标识符 http://en.wikipedia.org/wiki/Fragment_identifier)是没有实际加载新页面,因此 JavaScript 不会重新加载,并且当前(现在已损坏)Users
)正在使用中。kaboom!
摘自片段标识符 http://en.wikipedia.org/wiki/Fragment_identifier:
如果目标元素位于当前文档中,则用户代理可以简单地聚焦目标元素而无需重新加载它......
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)