如何使用marionette Collection View 从服务器获取数据?
how to use marionette CollectionView to fetch data deom the server?
我正在尝试创建一个简单的 Marionette(2.3.2) 应用程序,它从 RESTFUL 网络服务检索数据,
我做错了什么?如何修复此代码?这个示例应用程序的最佳结构是什么?
这里是 jsfiddle 上的代码:
http://jsfiddle.net/kdureidy/zaze13fw/
这是我的代码:
var Library = new Backbone.Marionette.Application();
var LayoutView = Backbone.Marionette.LayoutView.extend({
el: 'body',
template: '#content-template',
regions: {
mainRegion: "#main-region",
collectionRegion: "#collection-region"
}
});
var Book = Backbone.Model.extend({
url: "http://localhost:9090/library-0.1/books"
});
var MyChildView = Backbone.Marionette.ItemView.extend({
model: Book,
tagName: 'li',
template: '#list-template',
});
var BooksCollection = Backbone.Collection.extend({
url: 'http://localhost:9090/library-0.1/books',
model: Book
});
var collection1 = new BooksCollection({
model: Book
});
var MyCollectionView = Backbone.Marionette.CollectionView.extend({
url: "http://localhost:9090/library-0.1/books",
tagName: 'ul',
childView: MyChildView,
collectionEvents: {
'sync': 'render'
},
});
var c = new MyCollectionView({
collection: collection1
});
Library.layout_view = new LayoutView();
Library.layout_view.render();
Library.layout_view.collectionRegion.show(c);
Library.start();
我的模板是:
<script id="list-template" type="text/template">
<h2><%=title %></h2>
<span><%=author %></span>
<button>Click Here</button>
</script>
<script id="content-template" type="text/template">
<h1>This is Lesson 1</h1>
<div id="main-region" class="content">
</div>
<hr>
<div id="collection-region"></div>
</script>
CollectionView
不取数据,它渲染,Backbone.Collection是负责取数据的
MyCollectionView
不需要url
Marionette有collectionEvents
,你可以像modelEvents
一样使用,所以你的初始化可以用
代替
collectionEvents: {
'reset': 'render'
'change': 'render'
}
然后打电话,我会单独做
`collection1.fetch()` explicitly
永远 Marionette 应用程序结构请看:http://www.backbonerails.com/
我正在尝试创建一个简单的 Marionette(2.3.2) 应用程序,它从 RESTFUL 网络服务检索数据, 我做错了什么?如何修复此代码?这个示例应用程序的最佳结构是什么?
这里是 jsfiddle 上的代码: http://jsfiddle.net/kdureidy/zaze13fw/
这是我的代码:
var Library = new Backbone.Marionette.Application();
var LayoutView = Backbone.Marionette.LayoutView.extend({
el: 'body',
template: '#content-template',
regions: {
mainRegion: "#main-region",
collectionRegion: "#collection-region"
}
});
var Book = Backbone.Model.extend({
url: "http://localhost:9090/library-0.1/books"
});
var MyChildView = Backbone.Marionette.ItemView.extend({
model: Book,
tagName: 'li',
template: '#list-template',
});
var BooksCollection = Backbone.Collection.extend({
url: 'http://localhost:9090/library-0.1/books',
model: Book
});
var collection1 = new BooksCollection({
model: Book
});
var MyCollectionView = Backbone.Marionette.CollectionView.extend({
url: "http://localhost:9090/library-0.1/books",
tagName: 'ul',
childView: MyChildView,
collectionEvents: {
'sync': 'render'
},
});
var c = new MyCollectionView({
collection: collection1
});
Library.layout_view = new LayoutView();
Library.layout_view.render();
Library.layout_view.collectionRegion.show(c);
Library.start();
我的模板是:
<script id="list-template" type="text/template">
<h2><%=title %></h2>
<span><%=author %></span>
<button>Click Here</button>
</script>
<script id="content-template" type="text/template">
<h1>This is Lesson 1</h1>
<div id="main-region" class="content">
</div>
<hr>
<div id="collection-region"></div>
</script>
CollectionView
不取数据,它渲染,Backbone.Collection是负责取数据的MyCollectionView
不需要url
Marionette有
代替collectionEvents
,你可以像modelEvents
一样使用,所以你的初始化可以用collectionEvents: { 'reset': 'render' 'change': 'render' }
然后打电话,我会单独做
`collection1.fetch()` explicitly
永远 Marionette 应用程序结构请看:http://www.backbonerails.com/