Question

我在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”并且我可以更新值并将其保存到服务器。首先保存部件功能正常工作，如果我再次进入网格加载另一张票并保存“保存邮件将出现两次”

如果我保存5张票，则“保存”信息会出现五次。我认为有旧的门票事件没有用DOM更新，有没有人帮我解决这个问题，我一直试图解决这个问题两天，但仍然找不到合适的解决方案，

提前谢谢

Answer 1

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

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

模板方法

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

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')) ;
}

删除Knockout js中的绑定

1 个答案:

模板方法

可观察的视图模型方法