【发布时间】：2012-06-26 10:34:02
【问题描述】：
我正在使用带有 PhoneGap 的 Jquery Mobile 开发 Android，使用 Knockout 加载数据。
我正在获取数据并根据标签上的每个数据绑定将其加载到 HTML 页面上。
当我想刷新数据时，它就是不这样做。它只返回一个没有绑定数据或抛出 dom 异常的 HTML。
我的 applyBinding 发生在页面的 pagecreate 事件中。
我在我的 SkyDrive 上发布了一个描述问题的简单示例 - http://sdrv.ms/LpUdLt 这是一个重现问题的公共示例。 viewmodel 拥有一个包含数组的数组。 用随机值刷新。 尝试通过按下导航栏按钮在 jquery mobile 中重新加载页面并使用新数据重新加载 changepage 失败，并出现 dom 对象错误。 我不同意我不应该在每个页面创建时都创建一个 VM 实例，只是找不到实现它的方法，以便在 HTML 上重新呈现数据。
//indexPage.js
var wAViewModelInst ;
var viewPageIndexContent;
$('#pageIndex').live('pagecreate', function (event) {
viewPageIndexContent = document.getElementById("pageIndexContent");
wAViewModelInst = new WAViewModel(true);
ko.applyBindings(wAViewModelInst, viewPageIndexContent);
waHeaderVM.refreshContentData = function () {
// wAViewModelInst.updateRowList();
// ko.cleanNode(viewPageIndexContent);
// viewPageIndexContent = document.getElementById("pageIndexContent");
//wAViewModelInst = new WAViewModel(true);
//ko.applyBindings(wAViewModelInst, viewPageIndexContent);
$.mobile.changePage("index.html", { allowSamePageTransition: true, reloadPage: true });
$.mobile.hidePageLoadingMsg();
}
}
//WAViewModel
self.WARowList = ko.observableArray();
self.updateRowList = function () {
self.WARowList(self.GetWA());
}
//tried the exteding
//ko.observableArray.fn.WARowListUpdate = function () {
// //create a sub-observable
// this.hasItems = ko.observable();
// //update it when the observableArray is updated
// this.subscribe(function (newValue) {
// this.hasItems(newValue && newValue.length ? true : false);
// }, this);
// //trigger change to initialize the value
// this.valueHasMutated();
// //support chaining by returning the array
// return this;
//};
有什么方法可以在第一次渲染后更新 html 吗？
添加html代码：
<div id="pageIndex" data-role="page" data-transition="flip" data-theme="e" data-dom-cache="true">
<div id="indexHeader" data-role="header" data-theme="e">
<div data-role="navbar" data-iconpos="right">
<ul>
<li><a href="login.html" data-role="tab" data-icon="back" data-bind="click: loadingHandler"
class="brighter-text">חזרה</a></li>
<li><a href="#" data-role="tab" data-icon="refresh" data-bind ="click: refreshContentData" >רענן</a></li>
<li><a href="researchEvent.html" data-role="tab" data-icon="check" id="navBarResearchEventPage" data-bind="click: loadResearchEvent" class="brighter-text">ביצוע חקר</a></li>
<li><a href="#" data-role="tab" data-icon="grid" class="ui-btn-active brighter-text">
סידור עבודה</a></li>
</ul>
</div>
</div>
<div id="pageIndexContent" data-role="content" data-theme="e" style="padding-bottom: 52px;
height: 570px;">
<h2 data-bind="text:Title" class="brighter-text" style="font-size:22pt;">
</h2>
<div data-bind="foreach: WARowList" style="width: 99%; text-align: center">
<div>
<table style="float: right; width: 20%; height: 60px;" cellpadding="0" cellspacing="0">
<tr data-bind="visible : FirstRow " style="height: 31px;">
<th class="AlignedHeader">
<label>
שעה / שילוט</label>
</th>
</tr>
<tr data-bind="style: { backgroundColor: Odd() ? '#8CC63F' : '#AFC493' }">
<td style="width: 20%;" data-bind="style: { backgroundColor: IsNew() ? 'yellow' : 'transparent' }">
<input type="button" data-bind="click: ShowSampleDetails, value: ShilutTime , jQueryButtonUIEnableDisable:$data"
data-icon="plus" data-iconpos="right"/>
</td>
</tr>
</table>
<table style="height: 60px; width: 80%; background-color: #8CC63F;" data-bind="style: { backgroundColor: Odd() ? '#8CC63F' : '#AFC493' }"
cellpadding="0" cellspacing="0">
<thead data-bind="if : FirstRow">
<tr data-bind="foreach: CellList">
<th class="AlignedHeader">
<label data-bind="text: Date">
</label>
</th>
</tr>
</thead>
<tbody>
<tr data-bind="foreach: CellList">
<td style="width: 11.5%;">
<div data-bind="visible:IsPopulated ">
<div data-bind="visible: HasDrivers">
<input type="button" data-role="button" data-bind="click: ShowBusDriverList.bind($data , $root) , jQueryButtonUIEnableDisable: $data "
data-icon="search" data-iconpos="right" value="נהגים" class="brighter-text" />
</div>
<div data-bind="visible: !HasDrivers()">
<input type="button" data-role="button" id="btnNoDriver" disabled="disabled" data-icon="info"
data-iconpos="right" value="אין נהג" class="brighter-text" />
</div>
</div>
<div data-bind="visible: !IsPopulated">
</div>
</td>
</tr>
</tbody>
</table>
</div>
等等..
GetWA 函数返回一个 observableArray 的 wow list 。 它在第一次遇到重新渲染 dom 对象的问题时起作用。 dom 元素被 ko 污染并失败..
我试过路飞的答案：
var lVM = new loginViewModel();
var footerViewModelLogin = {
IsOnline: ko.observable(globalContext.Network()),
IsSync: ko.observable(globalContext.Sync())
};
$('#login').live('pagecreate', function (event) {
viewLoginContent = document.getElementById("loginContent");
ko.applyBindingsToNode(viewLoginContent, lVM);
viewLoginFooter= document.getElementById("footerLogin");
ko.applyBindingsToNode(viewLoginFooter, footerViewModelLogin);
});
$('#login').live('pagehide', function (event, ui) {
$.mobile.hidePageLoadingMsg();
});
function loginViewModel() {
var self = this;
try {
self.userName = ko.observable("");
self.password = ko.observable("");
self.message = ko.observable("");
self.CleanGlobalContext = function () {
...
};
self.Validate = function () {
...
};
}
catch (e) {
if (IsDebug) alert("GlobalContext.prototype.SetMapOverlay " + e.message);
if (typeof (console) != 'undefined' && console) console.log("GlobalContext.prototype.SetMapOverlay " + e.message);
}
}
ko.applyBindings(lVM);
ko.applyBindings(footerViewModelLogin);
没有要绑定的元素预定义事件，淘汰失败。
【问题讨论】：
-
你能给我们看更多的代码吗，比如 HTML 或者 GetWA 方法？当您说“它只返回空 HTML”时，返回空 HTML 的调用是什么？
-
问题是有没有办法重新应用绑定？ viewModel 中 observabeArray 的重新初始化不会重新组织和重新绘制视图。
-
我已经更正了帖子 - 它不返回 emty html - 它返回一个没有刷新视图模型的数据绑定信息的 html。
-
我添加了一个简单的重现问题示例。请指教..
-
我发现您的示例解决方案有点难以理解。在上面的代码中，我对重新创建新 WAViewModel 并重新应用绑定的注释部分中的行感到困惑。如果 GetWA() 返回新行的 JSON 数据，您不想用这些数据更新可观察数组吗？为什么要重新创建父 WAViewModel？还是我误解了视图模型结构？
标签： jquery-mobile cordova knockout.js