Backbone Marionette 在获取完成前显示 [英] Backbone Marionette Displaying before fetch complete
问题描述
我知道我在做一些愚蠢的事情,但我的主干牵线木偶应用程序给了我毫无意义的模板错误.它似乎在 fetch 事件发生之前呈现单个项目.
_.templateSettings = {插值:/{{(.+?)}}/g};MyApp = new Backbone.Marionette.Application();MyApp.addRegions({标签区域:#tagsHolder"});MyApp.NoItemsView = Backbone.Marionette.ItemView.extend({模板:#show-no-items-message-template"});MyApp.Tag = Backbone.Model.extend({});MyApp.TagCollection = Backbone.Collection.extend({模型:MyApp.Tag,网址:'/API/标签'});MyApp.TagItemView = Backbone.Marionette.ItemView.extend({模板:#标签模板",标签名称:'li'});MyApp.TagCollectionView = Backbone.Marionette.CollectionView.extend({itemView: MyApp.TagItemView,空视图:MyApp.NoItemsView,标签名称:'ul'});MyApp.addInitializer(功能(选项){var tagCollection = new MyApp.TagCollection({});var tagCollectionView = new MyApp.TagCollectionView({集合:标签集合});tagCollection.fetch();MyApp.TagsRegion.show(tagCollectionView);});
而我的 html 页面是
<h1>标签</h1><div id="tagsHolder"></div><script type="text/template" id="show-no-items-message-template">未找到任何项目.<script type="text/template" id="tag-template">{{ 标签名称 }}<script type="text/javascript" src="/Scripts/Views/Home/Upload.js"></script><script type="text/javascript">$(document).ready(function () {MyApp.start();});
如果我从我的标签模板中删除胡须,它会显示 1:"TagName ",那么当提取完成时,它会显示正确的数字.
如果我把胡子放回去,我会得到标签名称未定义"
我觉得我的模式之一倒退了.我实在是太近了,没看到.
谢谢-马克
问题出在初始化器中的这一行
var tagCollection = new MyApp.TagCollection({});
当您将空对象字面量传递给 Backbone.Collection 构造函数时,Backbone 在集合中创建一个空模型.要解决此问题,只需删除对象文字:
var tagCollection = new MyApp.TagCollection()
它不会再有空项目了.
I know i am doing something stupid but my backbone marionette app is giving me template errors that don't make sense. It appears to be rendering a single item before the fetch event happens.
_.templateSettings = {
interpolate: /{{(.+?)}}/g
};
MyApp = new Backbone.Marionette.Application();
MyApp.addRegions({
TagsRegion: "#tagsHolder"
});
MyApp.NoItemsView = Backbone.Marionette.ItemView.extend({
template: "#show-no-items-message-template"
});
MyApp.Tag = Backbone.Model.extend({
});
MyApp.TagCollection = Backbone.Collection.extend({
model: MyApp.Tag,
url: '/API/Tag'
});
MyApp.TagItemView = Backbone.Marionette.ItemView.extend({
template: "#tag-template",
tagName: 'li'
});
MyApp.TagCollectionView = Backbone.Marionette.CollectionView.extend({
itemView: MyApp.TagItemView,
emptyView: MyApp.NoItemsView,
tagName: 'ul'
});
MyApp.addInitializer(function(options){
var tagCollection = new MyApp.TagCollection({
});
var tagCollectionView = new MyApp.TagCollectionView({
collection: tagCollection
});
tagCollection.fetch();
MyApp.TagsRegion.show(tagCollectionView);
});
and my html page is
<div id="TagsDiv">
<h1>Tags</h1>
<div id="tagsHolder"></div>
</div>
<script type="text/template" id="show-no-items-message-template">
No items found.
</script>
<script type="text/template" id="tag-template">
{{ TagName }}
</script>
<script type="text/javascript" src="/Scripts/Views/Home/Upload.js"></script>
<script type="text/javascript">
$(document).ready(function () {
MyApp.start();
});
If I remove the mustaches from my tag-template it displays 1: " TagName " then when the fetch completes it shows the right number.
if i put the mustaches back in i get "TagName is not defined"
I feel that i have one of my patterns backwards. I am just too close to see it.
Thanks -Mark
The problem is this line in your initializer
var tagCollection = new MyApp.TagCollection({
});
When you pass an empty object literal in to a Backbone.Collection constructor, Backbone creates an empty model in the collection. To fix this, just remove the object literal:
var tagCollection = new MyApp.TagCollection()
and it won't have the empty item in it anymore.
这篇关于Backbone Marionette 在获取完成前显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!