Pracuję na systemie Android z Jquery Mobile z Phonegap przy użyciu Knockout do ładowania danych.Knockout refresh obserwujArray w html
Dostaję dane w porządku i ładuję je na stronę html zgodnie z powiązaniem danych foreach, które mam na znacznikach.
Kiedy chcę odświeżyć dane, po prostu tego nie robię. Zwraca on tylko html bez danych wiązanych lub nie znaleziono wyjątku miotania dom Moje applyBinding dzieje się wewnątrz zdarzenia stronicowania strony.
Opublikowałem prosty przykład opisujący problem na moim SkyDrive - http://sdrv.ms/LpUdLt Jest to publiczny przykład odwzorowujący problem. Model viewmodel posiada tablicę zawierającą tablicę. odświeżony z wartościami losowymi. próbuje przeładować stronę w jquery mobile z ładowaniem strony changup z nowymi danymi, naciskając przycisk na pasku nawigacyjnym kończy się niepowodzeniem z błędem obiektu dom. Zgadzam się, że nie powinienem tworzyć instancji maszyny wirtualnej dla każdej strony, ale nie mogę znaleźć sposobu na jej wdrożenie, aby dane zostały ponownie przesłane na 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;
//};
Czy istnieje sposób aktualizacji html po pierwszym renderowaniu?
dodając kod 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>
i tak dalej ..
funkcja GetWA zwracającą observableArray listy warow. po raz pierwszy problem polega na ponownym utworzeniu obiektu dom. element dom jest zanieczyszczona i nie ko ..
Próbowałem odpowiedź Luffy:
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);
nokaut nie bez elementu predefiniowane zdarzenia do wiązania.
Czy możesz pokazać nam nieco więcej kodu, takiego jak HTML lub metoda GetWA? Kiedy mówisz "zwraca tylko pusty HTML", co jest wywoływane, które zwraca pusty HTML? – CodeThug
pytanie, czy istnieje sposób ponownego zastosowania wiązań? ponowne zainicjowanie obiektu obserwacyjnegoArray w widokuModel nie reorganizuje i nie odświeża widoku. –
Poprawiłem wpis - nie zwraca emty html - zwraca HTML bez informacji o powiązaniu danych odświeżonego viewmodelu. –