Backbone Collection和一些视图在click()
的返回函数中创建,如下面的代码片段所示。
问题:如何使用Javascript控制台访问backbone.js对象,例如Collection productList
? this.productList
不会返回任何内容,因此我认为productList
不是window
对象的直接子项。那么我应该如何创建productList
集合?
JS代码
$('#submit_btn').click(function() {
console.log('do something');
}, function() {
this.productList = new ProductCollection();
var self = this;
self.productListView = new ProductListView({ collection: self.productList });
this.productList.fetch({
data: {gender: 'men'},
processData: true
});
});
});
答案 0 :(得分:2)
现在在这种情况下你不能将所有东西都放在一个匿名函数中,所以你不能在函数执行后访问它。无论如何,这不是正确的做事方式,也不是骨干方式。
这就是我一般做的事情, 创建一个像app一样的中心命名空间,然后创建该命名空间的所有模型,集合和视图
window.App = {
//model
Curve : {},
//collection
CurveManager : {},
//view
Views : {},
//controller
Controller : {}
}
加上我认为你应该从骨干视图本身处理点击事件,然后你可以比较容易地想象事物。例如,在http://backbonejs.org/docs/todos.html中查看AppView事件。这应该会让事情变得更加清晰。
这是代码的一部分
var AppView = Backbone.View.extend({
el: $("#todoapp"),
statsTemplate: _.template($('#stats-template').html()),
events: {
"keypress #new-todo": "createOnEnter",
"click #clear-completed": "clearCompleted",
"click #toggle-all": "toggleAllComplete"
},
.
. // more code in between
.
createOnEnter: function(e) {
if (e.keyCode != 13) return;
if (!this.input.val()) return;
Todos.create({title: this.input.val()});
this.input.val('');
},
我通常会在github上查看其他人的代码并尝试了解他们如何做事以及应该如何做,我建议你也这样做。它有很大的帮助:) todoapp注释源非常干净,非常容易理解。
答案 1 :(得分:0)
您可以将productList附加到window
对象。
$('#submit_btn').click(function() {
console.log('do something');
}, function() {
window.productList = new ProductCollection();
var self = this;
self.productListView = new ProductListView({ collection: self.productList });
window.productList.fetch({
data: {gender: 'men'},
processData: true
});
});
});
但是你最好像@avk那样重构你的代码,所以submit_btn
是Backbone视图的一部分。
无论发生了什么,由于该实例中的this
引用了代码运行的闭包,因此在将其导出到外部可用对象之前,它将无法访问。