我使用knockout js与JqueryMobile进行前端数据绑定,我有一个与Knockout js Object调用DataGrid绑定的视图。 DataGrid对象包含填充在表中的对象数组(使用fooTable)。当用户单击一行时,它应该加载到另一个页面。我想将所选对象绑定到UI但是当前它没有发生。它只将DataGrid对象绑定到用户界面,有人能引导我完成这个吗?
//Data Grid Object
function DataGrid(){
var self = this;
self.dataGrid = ko.observableArray();
self.addTicketToGrid = function(ticket){
self.dataGrid.push(ticket);
}
}
function Ticket(jsTicket){
var self = this;
ko.mapping.fromJS(jsTicket, {}, this);
this.formattedDate = moment(self.date(),"YYYY-MM-DDTHH:mm:ss").format("MM-DD HH:MM");
this.getRunTicket = function(){
servicet.getTicket(self);
}
}
getTicketListFromDB : function (){
var rtGrid = new DataGrid();
var rtList = PortalDB.getObjList(); // Get objects from local storage
for(var i = 0; i <rtList.length; i++){
var rt = rtList[i];
var ticket1 = new Ticket(rt); //Create new Ticket object
rtGrid.addTicketToGrid(ticket1); // Add Ticket to Grid
}
ko.applyBindings(rtGrid);
}
网格的Html
<tbody data-bind="foreach : dataGrid">
<tr>
<td><span data-bind="text : number(),click: getTicket"></span></td>
<td><span data-bind="text : formattedDate></span></td>
<td><span data-bind="text : operatorName()"></span></td>
</tr>
</tbody>
当用户点击第一列getTicket函数调用并加载到Ticket detail UI时,我想将所选的Ticket对象与加载的UI绑定,但它不适用于我,getTicket函数实现
goToRunTicketDetails: function(ticket){
$.mobile.navigate( "#ticketDetailsPage" );
alert(ticket.ticketNumber) // this alert shows the ticketNumber
ko.applyBindings(ticket);
}
html for ticketDetailsPage
<div data-role="page" id="runTicketDetailsPage" data-theme="b">
<div data-role="content" data-theme="b" data-position="fixed">
<h1>Ticket No (<span data-bind="text: ticketNumber"></span>)</h1>
<button id="save" data-icon="save" class="ui-btn-right" data-bind="click: refreshGrid">Save</button>
</div>
</div>
在这里ticketNumber
没有显示任何值,但如果我放dataGrid().length
而不是ticketNumber,它会显示数据网格的大小,任何人都可以告诉我这段代码有什么问题吗?
提前谢谢