我正确地获取数据并将其加载到HTML页面上,相应地我对标签上的每个数据绑定.
当我想刷新数据时,它就不会这样做.它只返回一个没有绑定数据的HTML或者找不到dom异常.
我的applyBinding发生在页面的pagecreate事件中.
我发布了一个简单的例子来描述我的SkyDrive – http://sdrv.ms/LpUdLt上的问题
这是一个重现问题的公共示例.
viewmodel包含一个包含数组的数组.
用randomal值刷新.
尝试在jquery mobile中重新加载页面,通过按下导航栏按钮更改页面重新加载新数据失败,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函数返回warow列表的observableArray.
它是第一次麻烦重新渲染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);
如果没有要绑定的元素预定义事件,则淘汰失败.
解决方法
>如果更改了一个可观察数组,则会重新实例化所需的模板,以便连贯地更新UI.但是,您必须通过使用可观察数组函数或通过向observable传递一个新数组来更新可观察数组:obs(newArray).>如果你需要在ko重新渲染后执行操作,你只需要使用模板绑定的afterRender或afterAdd参数>如果你添加新的jquery移动代码,你必须在创建它之后解析它,否则jquery mobile将无法工作…再次你可以在afterRender函数中执行此操作.>通过ajax加载包含ajax ko绑定的html是有问题的.正确的方法是将该内容创建为模板,您可以立即呈现(而不是使用ajax).然后查询服务器只是为了获取新的json内容.然后,您可以使用例如with绑定来实例化模板.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。