如果您使用的是最新版本的 jQuery Mobile,您必须知道嵌套列表只有部分支持。 这是源链接。. 如前所述,我们必须自己使用页面 -> 页面导航系统,所以就这样吧。
设置
我在某个时候为此建立了一个示例。你可以调整你的代码。我有一个像这样的json
对象数组:
[
{
"name": "DC Comics",
"characters": [
"All-Star Squadron",
"Birds of Prey",
...
]
},
{
"name": "Marvel Studios",
"characters": [
"Alpha Flight",
"Avengers",
"Champions",
"Defenders",
...
]
}
....
]
所以,如果你有两个页面可能会更好,一个用于显示主列表,也就是组,单击时,另一个页面显示子项目,即字符。
在页面加载时,我想显示如下内容:
当单击其中一个链接时,我想显示字符数组中存在的内容。例如,如果我选择“DC Comics”,当前上下文将是:
{
"name": "DC Comics",
"characters": [
"All-Star Squadron",
"Birds of Prey",
...
]
}
从这里,我将取出该characters
属性并将其显示在新页面的列表中。(无论如何,这就是嵌套列表曾经做的事情)。因此,需要这样的东西:
两个页面,两个 ViewModel
现在要实现这一点,可能有办法。但是最好的方法是使用多个 ViewModels,每个页面一个,因此将其设为2并在初始化该特定页面时绑定它。所以对于一个特定的页面,
标记:
<div data-role="page" id="groups-page"></div>
查看型号:
我们会有一个单独的ViewModel
:
//view model for the parent page.
var groupModel = {
//data array
groupInfo: [
{
"name": "DC Comics",
"characters": [
"All-Star Squadron",
"Birds of Prey",
...
]
},
{
"name": "Marvel Studios",
"characters": [
"Alpha Flight",
"Avengers",
"Champions",
"Defenders",
...
]
}
....
]
}
pageinit
事件:pageinit
并在以下事件中
绑定它#group-page
:
//events pertaining to Page 1 - the groups
$(document).on({
"pageinit": function () {
//apply partial binding to groups-page alone. Reason we're doing this is because only this page will be available onload
ko.applyBindings(groupModel, this);
}
}, "#groups-page");
请注意,applyBindings
( ) 中的第二个对象表示设置为this
的 DOM 元素。id
groups-page
同样,你会为第二页做同样的事情,#character-page
:
标记:
<div data-role="page" id="character-page"></div>
视图模型:
//view model for the character page - basically an empty view model to be filled with data when a link is clicked.
var characterModel = {
name: ko.observable(),
characterInfo: ko.observableArray()
}
pageinit
事件 :
//events pertaining to Page 1 - the groups
$(document).on({
"pageinit": function () {
//apply partial binding to character-page alone.
ko.applyBindings(groupModel, this);
}
}, "#character-page");
我们在这里使用 observables 的原因是因为每次单击某些内容时,我们都会更新 observables,这将自动更改第二页列表视图的内容。
填充第一页
这就是我的 HTML 结构的样子:
<ul data-bind="foreach: groupInfo">
<li>
<a href="#">
<span data-bind="text: name"></span>
<span data-bind="text: characters.length" class="ui-li-count"></span>
</a>
</li>
</ul>
在applyBindings()
只绑定到第一页之后,我会在页面中的那些列表视图上调用刷新:
//apply partial binding to groups-page alone. Reason we're doing this is because only this page will be available onload
ko.applyBindings(groupModel, this);
//refresh the listview
$("ul", this).attr("data-role", "listview").listview().listview("refresh");
这将pageinit
在#group-page
.
组的点击事件,将页面更改为字符
为此,我会在第一页的列表视图click
的标签上使用 KO 的绑定:a
<a href="#" data-bind="click: $root.getInfo">
<span data-bind="text: name"></span>
<span data-bind="text: characters.length" class="ui-li-count"></span>
</a>
其中 $root 是 ViewModel 级别的上下文(请参阅文档)。
等一下! getInfo
必须添加到groupModel
第一页的模型中。因此视图模型更改为:
//view model for the parent page.
var groupModel = {
//data array
groupInfo: [
//groups
],
//click event to be fired when an anchor tag is clicked
getInfo: function (data, e) {
//here "data" variable gives the clicked elements' corresponding array and "e" gives the event object
//prevents defaultbehaviour of anchor tag
e.preventDefault();
//setting up the character array in View model of page 2
characterModel.characterInfo(data.characters);
//setting up name variable of ViewModel in page 2
characterModel.name(data.name);
//change the page
$.mobile.changePage("#character-page", {
transition: "slide"
});
}
}
请注意,我现在填充的是characterModel
唯一的。由于该模型内部的属性是observables
,因此每次更新这些变量时,DOM 也会更新。第二页的 HTML 是:
<ul data-bind="foreach: characterInfo">
<li data-bind="text: $data"></li>
</ul>
$data
用于获取里面的东西characterInfo
,如果你不知道的话。完成后,您将拥有以下内容:
下一步是刷新列表视图,但不是在pageinit
. 原因是,pageinit
仅触发一次,并且character-page
每次点击都会更新,因此您必须使用pageshow
orpagebeforshow
方法。更多信息在这里。现在的events
界限character-page
是:
//events pertaining to Page 2 - the characters
$(document).on({
"pageinit": function () {
ko.applyBindings(characterModel, this);
},
"pagebeforeshow": function () {
//refresh listview before page is shown
$("ul", this).attr("data-role", "listview").listview().listview("refresh");
}
}, "#character-page");
pagebeforeshow
每次触发事件时,上面的片段都会刷新你的样式"#character-page"
(这是我们想要的),最后给你这个:
就是这样了!希望这有帮助:)
而且,在我们忘记之前,
这是一个演示。