列表视图 css 不呈现 jquery mobile [英] List view css not rendering jquery mobile
问题描述
我正在使用 jquery mobile、phone gap 和backbone.js 制作一个应用程序.在此我动态创建页面并将其附加到 html 页面的 body 元素.我还为特定页面动态创建列表视图.然而,列表视图只显示 li 标签的简单链接.我的视图代码如下
directory.views.UserListPage = Backbone.View.extend({初始化:函数(){this.template = _.template(directory.utils.templateLoader.get('user-list-page'));},事件:{点击.add-button":addButton_clicked"},渲染:函数(事件名称){$(this.el).html(this.template(this.model.toJSON()));this.listView = new directory.views.UserListView({el: $('ul', this.el),model: this.model});this.listView.render();$content = $(this.el).children(":jqmData(role=content)");$(this.el).appendTo($("body")).page();$content.find(":jqmData(role=listview)").listview();返回这个;},addButton_clicked:函数(事件){console.log("点击");event.preventDefault();directory.app.navigate("addUser", {trigger: true});}});directory.views.UserListView = Backbone.View.extend({初始化:函数(){this.model.bind("reset", this.render, this);},渲染:函数(事件名称){$(this.el).empty();_.each(this.model.models, function(user) {$(this.el).append(new directory.views.UserListItemView({model: user}).render().el);}, 这);返回这个;}});directory.views.UserListItemView = Backbone.View.extend({tagName: "li",事件:{点击":借阅历史"},初始化:函数(){this.template = _.template(directory.utils.templateLoader.get('user-list-item'));},渲染:函数(事件名称){$(this.el).html(this.template(this.model.toJSON()));返回这个;} ,借用历史:函数(事件){var children = $(event.currentTarget).children();var 属性 = children[0].dataset.id;var url = "#/rs/" + 属性 + "/borrowHistory";directory.app.navigate(url, {trigger: true});返回假;}});
我的模板是这样的
<a href="#addUser" data-role="button" data-icon="plus" >Add</a><h1>借用伴侣</h1><div id="listUser" data-role="content" ><div id="列表内容"><ul id="userList" data-role="listview" data-inset="true" data-theme="e" data-divider-theme="e" data-count-theme="e">
用户列表项
解决方案需要刷新listview
所以在你追加需要刷新的列表项后,像这样
$('#userList').listview('refresh');
使用您提供的模板的 id 属性
<ul id="userList" data-role="listview" data-inset="true" data-theme="e" data-divider-theme="e" data-count-theme=e">
I am making an application using jquery mobile, phone gap and backbone.js. In this I am dynamically creating pages and appending it to the body element of the html page. I am also dynamically creating a list view for a particular page. However the list view just shows plain links for the li tags. The code for my view is below
directory.views.UserListPage = Backbone.View.extend({
initialize: function() {
this.template = _.template(directory.utils.templateLoader.get('user-list-page'));
},
events:{ "click .add-button": "addButton_clicked"
},
render: function(eventName) {
$(this.el).html(this.template(this.model.toJSON()));
this.listView = new directory.views.UserListView({el: $('ul', this.el),model: this.model});
this.listView.render();
$content = $(this.el).children(":jqmData(role=content)");
$(this.el).appendTo($("body")).page();
$content.find(":jqmData(role=listview)" ).listview();
return this;
},
addButton_clicked: function(event) {
console.log("clicked");
event.preventDefault();
directory.app.navigate("addUser", {trigger: true});
}});
directory.views.UserListView = Backbone.View.extend({
initialize: function() {
this.model.bind("reset", this.render, this);
},
render: function(eventName) {
$(this.el).empty();
_.each(this.model.models, function(user) {
$(this.el).append(new directory.views.UserListItemView({model: user}).render().el);
}, this);
return this;
}});
directory.views.UserListItemView = Backbone.View.extend({
tagName: "li",
events:
{
"click" : "borrowHistory"
}
,
initialize: function() {
this.template = _.template(directory.utils.templateLoader.get('user-list-item'));
},
render: function(eventName) {
$(this.el).html(this.template(this.model.toJSON()));
return this;
} ,
borrowHistory: function(event) {
var children = $(event.currentTarget).children();
var attribute = children[0].dataset.id;
var url = "#/rs/" + attribute + "/borrowHistory";
directory.app.navigate(url, {trigger: true});
return false;
}});
My template looks like this
<div data-role="header" data-theme="e">
<a href="#addUser" data-role="button" data-icon="plus" >Add</a>
<h1>Borrow Mate</h1>
</div>
<div id="listUser" data-role="content" >
<div id="listcontent">
<ul id="userList" data-role="listview" data-inset="true" data-theme="e" data-divider-theme="e" data-count-theme="e"> </ul>
</div>
</div>
User list item
<div class="userListItem" data-id = "<%= id %>" >
<b><%= Name %></b>
<span class="ui-li-count"><%= Credits %></span>
</div>
解决方案 You need to refresh the listview
So After you append the list items you need to refresh, like this
$('#userList').listview('refresh');
Using the id attribute of the template you have provided
<ul id="userList" data-role="listview" data-inset="true" data-theme="e" data-divider-theme="e" data-count-theme="e">
</ul>
这篇关于列表视图 css 不呈现 jquery mobile的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文