[英]Backbone.js - rendering collection with jquery mobile renders without styling
I'm creating a mobile view that uses backkbone.js and jquery mobile. 我正在创建一个使用backkbone.js和jquery mobile的移动视图。
I have a collection that I render to the page, styled up to use jquery mobile's listview . 我有一个呈现给页面的集合,其样式设置为使用jquery mobile的listview 。 The collection loads and is rendered on the page with the correct html, but renders as an un-styled list, not how it should render in jquery mobile. 集合会加载并使用正确的html呈现在页面上,但呈现为未样式化的列表,而不是应如何在jquery mobile中呈现。 If I then inspect the list, copy it as html, and paste it into my html page as static html, that html displays correctly! 如果我随后检查该列表,请将其复制为html,然后将其作为静态html粘贴到我的html页面中,该html将正确显示!
What am I doing wrong? 我究竟做错了什么? This is my first foray into both backbone.js and jquery mobile so it could be something simple. 这是我第一次尝试belimber.js和jquery mobile,因此可能很简单。
Code: 码:
My templates: 我的模板:
<script id="change-template" type="text/template">
<a href="#">{{ Description }}</a>
<p>{{ ChannelLabel }}</p>
</script>
<script id="changes-template" type="text/template">
<ul id="changes-list" data-role="listview" data-inset="false" data-filter="true"></ul>
</script>
My views: 我的看法:
window.ChangeView = Backbone.View.extend({
tagName: 'li',
initialize: function() {
_.bindAll(this, 'render');
this.template = _.template($('#change-template').html());
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
})
window.ChangesView = Backbone.View.extend({
tagName : "div",
initialize: function () {
_.bindAll(this, 'render');
this.template = _.template($('#changes-template').html());
this.collection.bind("reset", this.render);
},
render: function () {
var collection = this.collection;
// Render the template
$(this.el).html(this.template({}));
// Then get a handle to the element inside the template.
var $changes = this.$('#changes-list');
this.collection.each(function(change) {
var view = new ChangeView({model: change, collection: collection});
$changes.append(view.render().el);
})
return this;
}
});
Example HTML output: HTML输出示例:
<div id="changes" data-role="content" class="ui-content" role="main">
<ul id="changes-list" data-role="listview" data-inset="false" data-filter="true"><li>
<a href="#">Link Up</a>
<p>GF1A-R2P24 - 23</p>
</li><li>
<a href="#">Link Down</a>
<p>GF1A-R2P24 - 23</p>
</li></ul>
</div>
This is how I load the page: 这是我加载页面的方式:
$(document).bind('pageinit',function () {
window.changes = new Changes();
var view = new ChangesView({ collection: changes, el:"#changes" });
changes.fetch();
});
Ok, so by looking around, I found that adding this solved the issue: 好的,所以环顾四周,我发现添加此功能可以解决此问题:
$(this.el).trigger( "pagecreate" );
But this feels wrong - why should I need to trigger that event myself? 但这感觉不对-我为什么需要自己触发该事件?
If all the DOM-changes were done before the jQuery Mobile started styling the page, it would work just fine. 如果所有DOM更改都在jQuery Mobile开始设置页面样式之前完成,那么它将很好地工作。 However, Backbone.js' events cause parts of the page to re-render asynchronously, leaving parts of the page unstyled. 但是,Backbone.js的事件导致页面的某些部分异步地重新呈现,从而使页面的某些部分保持未样式化。
Calling .trigger("pagecreate") or "create" triggers jQuery Mobile to restyle the page/elements. 调用.trigger(“ pagecreate”)或“ create”会触发jQuery Mobile重新设置页面/元素的样式。
(Each time jQuery Mobile displays a page it reads the data- attributes and applies the appropriate styling.) (每次jQuery Mobile显示一个页面时,它都会读取数据属性并应用适当的样式。)
This is necessary because jQuery Mobile and Backbone.js are separate frameworks. 这是必需的,因为jQuery Mobile和Backbone.js是独立的框架。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.