私はバックボーンが初めてで、コレクションからのデータを表示できないようです。間違っている部分を指摘してください。
次の js コードを検討してください。
App.ProvidersView = Backbone.View.extend({
id: "Providers",
template: "#-providers-template",
render: function() {
var html = $(this.template).tmpl();
$(this.el).html(html).addClass('container-fluid');
this.collection.each(this.renderProvider);
},
initialize: function() {
_.bindAll(this, "renderProvider");
},
renderProvider: function(Provider){
var ProviderView = new App.ProviderView({
model: Provider
});
ProviderView.render(Provider);
$(this.el).append(ProviderView.el);
}
});
App.ProviderView = Backbone.View.extend({
id: "Provider",
template: "#-provider-template",
initialize: function(){
this.template = $(this.template);
},
render: function(){
var html = this.template.tmpl(this.model.toJSON());
$(this.el).html(html);
}
});
App.Provider = Backbone.Model.extend();
App.ProviderCollection = Backbone.Collection.extend({
url: "php/Provider.php",
model: App.Provider
});
App.addInitializer(function() {
var providers = new App.ProviderCollection();
providers.fetch({success: function() {
console.log(Providers.models);
}});
var provider = new App.Provider();
var providersView = new App.ProvidersView({
model: Provider,
collection: Providers
});
providersView.render();
$("#main").html(providersView.el);
$("#providers-list").html(provider.el);
});
App.bind('initialize:after', function() {
Backbone.history.start();
});
$(function() {
App.start();
});
テンプレート:
<script type="text/x-jquery-tmpl" id="content-providers-template">
<div class="row-fluid">
<div class="span12">
<h5>Content Providers</h5>
</div>
</div>
<div id="content-providers-list"></div>
</script>
<script type="text/x-jquery-tmpl" id="content-provider-template">
<div class="row-fluid">
<div class="span12">
<div class="panel">
<h2 class="toggle"><i class="icon-chevron-down icon-white pull-right"></i>${name}</h2>
</div>
</div>
</div>
</script>
依存関係:
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="scripts/json2.js"></script>
<script type="text/javascript" src="scripts/underscore.js"></script>
<script type="text/javascript" src="scripts/backbone.js"></script>
<script type="text/javascript" src="scripts/backbone.marionette.js"></script>
また、バックボーンを学習するための本当に優れたリソースを共有していただければ幸いです。