使用JqueryMobile敲除JS数据绑定

时间:2013-12-28 07:12:09

标签: javascript jquery jquery-mobile knockout.js

我使用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,它会显示数据网格的大小,任何人都可以告诉我这段代码有什么问题吗?

提前谢谢

0 个答案:

没有答案