Я изучаю Backbone и попал в одно место. Я хотел загрузить модель при загрузке страницы. Итак, у меня есть код ниже.
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/backbone-min.js"></script>
<script src="js/json2.js"></script>
</head>
<body>
<h1></h1>
<div id="poview"></div>
<script id="poTemplate" type="text/template">
<td><%= Ponumber %></td>
<td><%= Posuppliername %></td>
<td><%= Postatusname %></td>
<td><%= Podate %></td>
<td><%= DispOrderTotal %></td>
</script>
<script type="text/javascript">
(function($) {
var PO = Backbone.Model.extend()
var POList = Backbone.Collection.extend({
url: 'po.json',
model: PO,
parse: function(response) {
console.log(response.PurchaseOrder)
return response.PurchaseOrder
}
})
var POView = Backbone.View.extend({
tagName: 'tr',
template: $('#poTemplate').html(),
initialize: function() {
_.bindAll(this, 'render')
this.model.bind('change', this.render)
},
events: {
'click': 'click'
},
render: function() {
console.log('po render')
var tmpl = _.template(this.template)
$(this.el).html(tmpl(this.model.toJSON()))
return this;
},
click: function() {
console.log('clicked....')
}
})
var POListView = Backbone.View.extend({
el: $('#poview'),
initialize: function() {
_.bindAll(this, 'render', 'appendPO')
this.collection = new POList()
this.collection.bind('change', this.render, this)
this.collection.bind('add', this.render, this)
this.collection.fetch({add:true})
},
render: function() {
var self = this;
console.log(this.collection.models)
this.collection.each(function(po) {
self.appendPO(po)
}, this)
},
appendPO: function(po) {
var poView = new POView({
model: po
});
console.log(po)
$(this.el).append(poView.render().el)
}
});
var poListView = new POListView()
})(jQuery)
</script>
</body>
</html>
И ниже ответ json от сервера
{
"@totalCount": "1134",
"PurchaseOrder": [
{
"ID": "689600",
"Ponumber": "K037412201",
"Poname": "",
"Podate": "2011-12-26T10:03:24.000+05:30",
"Posuppliername": "XYZ UPS Supplier",
"Postatusname": "Approved - Supplier Received",
"DispOrderTotal": "$1.99"
},
{
"ID": "689601",
"Ponumber": "K037412202",
"Poname": "",
"Podate": "2011-12-26T10:03:24.000+05:30",
"Posuppliername": "ABC UPS Supplier",
"Postatusname": "Approved - Supplier Received",
"DispOrderTotal": "$1.99"
}
]
}
Но когда страница загружается, метод рендеринга в POListView не запускается. В чем проблема в этом коде?
Изменить
jQuery(function($){
...
});
Если я также использую вышеуказанное соглашение, это не сработает.
Рабочий пример См. ответ от @JayC
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
<script src="js/json2.js"></script>
</head>
<body>
<h1></h1>
<div id="poview"></div>
<script id="poTemplate" type="text/template">
<td><%= Ponumber %></td>
<td><%= Posuppliername %></td>
<td><%= Postatusname %></td>
<td><%= Podate %></td>
<td><%= DispOrderTotal %></td>
</script>
<script type="text/javascript">
jQuery(function($) {
var PO = Backbone.Model.extend({
idAttribute: 'ID'
})
var POList = Backbone.Collection.extend({
url: 'po.json',
model: PO,
parse: function(response) {
console.log('parse')
return response.PurchaseOrder
}
})
var POView = Backbone.View.extend({
tagName: 'tr',
template: $('#poTemplate').html(),
initialize: function() {
_.bindAll(this, 'render', 'click')
},
events: {
'click': 'click'
},
render: function() {
var tmpl = _.template(this.template)
$(this.el).html(tmpl(this.model.toJSON()))
return this;
},
click: function() {
console.log('clicked.... ' + this.model.id)
}
})
var POListView = Backbone.View.extend({
el: $('#poview'),
initialize: function() {
_.bindAll(this, 'render', 'appendPO')
this.collection = new POList()
this.collection.bind('reset', this.render, this)
this.collection.fetch()
},
render: function() {
var self = this;
console.log(this.collection.models)
this.collection.each(function(po) {
self.appendPO(po)
}, this)
},
appendPO: function(po) {
var poView = new POView({
model: po
});
$(this.el).append(poView.render().el)
}
});
var poListView = new POListView()
});
</script>
</body>
</html>
