1

我在 jquery mobile 中使用 koGrid。当用户单击一行时，它将进入详细信息页面。在该页面中，用户可以更新数据并保存它。blow 是我的实现

var ProgressGrid = function(){
    var self = this;
    self.ticketList = ko.observableArray(servicet.filterTsFromStatus('PROGRESS'));
    columnDefs: [
            {
                field: 'ticketNumber',
                displayName: 'Ticket',
                cellTemplate: "<button data-bind=\"click: function() {getRowDetails($parent.entity)}\"><span data-bind=\"text:$parent.entity['ticketNumber']\"></span></button>",
                width: '*',
                minWidth: "200px"
            }
    self.getRowDetails = function(row){
      var rtJS = servicet.getTicketById(row.id);
      servicet.goToTicketDetails(rtJS,false);
    },
}

工单对象

function RunTicket(jsRunTicket) {
    ko.validatedObservable(ko.mapping.fromJS(jsRunTicket, validationMapping, self));

    this.save = function (action) {
    }
}

服务方式

 goToRunTicketDetails: function(ticketJS,readOnly){
    ko.cleanNode(document.getElementById('runTicketDetailsPage'));
    var rt = new Ticket(ticketJS);
    ko.applyBindings(rt, document.getElementById("ticketDetailsPage"));
    $.mobile.changePage($('#ticketDetailsPage')) ;
}

当我单击网格中的行按钮时，它将进入“ticketDetailsPage”，我可以更新值并将其保存到服务器。首先保存部分功能工作正常，如果我再次进入网格加载另一张票并save "保存信息会出现两次"

如果我保存 5 张票“保存”消息会出现五次。我认为有旧票活动没有使用 DOM 更新，谁能帮我解决这个问题，我已经尝试解决了两天，但仍然找不到合适的解决方案，

先感谢您

4

1 回答 1

2

ko.cleanNode旨在确保在不再需要绑定时释放内存。但是，大多数绑定不会删除事件处理程序，因为不需要释放内存。您不应该使用ko.cleanNode来尝试重新应用绑定。

Knockout 支持两种更改绑定到 DOM 部分的视图模型的方法。第一个是通过模板，第二个是通过可观察的视图模型。

模板法

此方法始终绑定到一组新的 DOM 元素（从模板复制）。有多种定义和渲染模板的方法；一是使用Knockout的ko.renderTemplate方法。首先，确保您已在 HTML 中使用<script type="text/html" id="ticketDetailsPageTemplate">. 然后，您将像这样使用模板：

goToRunTicketDetails: function (ticketJS, readOnly) {
    var rt = new Ticket(ticketJS);
    ko.renderTemplate("ticketDetailsPageTemplate", rt, {}, document.getElementById("ticketDetailsPage"));
    $.mobile.changePage($('#ticketDetailsPage')) ;
}

可观察视图模型方法

此方法的工作方式与您现有的代码类似，因为 DOM 元素被保留并重新绑定到新的视图模型。但是，该方法不是创建新的事件处理程序，而是使用新的视图模型更新事件处理程序。这是您可以做到的一种方法：

goToRunTicketDetails: function (ticketJS, readOnly) {
    var elementToBind = document.getElementById('runTicketDetailsPage');
    var existingContext = ko.contextFor(elementToBind);
    var rt = new Ticket(ticketJS);
    if (existingContext && ko.isObservable(existingContext.$rawData)) {
        existingContext.$rawData(rt);   // update observable with new view model
    } else {
        ko.applyBindings(ko.observable(rt), elementToBind);   // initialize with observable view model
    }
    $.mobile.changePage($('#ticketDetailsPage')) ;
}
于 2014-03-11T08:33:27.067 回答