knockout.js - 如何在 knockoutjs 中更新绑定或删除较早的绑定

Question

我有以下代码从 ajax 调用中获取数据并与我页面的不同部分绑定。

$.getJSON("api/RedeemProduct", { 'productId': productId }, function (data) {
    categoryViewModel = ko.mapping.fromJS(data[0].WishlistProduct.WishlistCategory);
    ko.applyBindings(categoryViewModel, $('section.intro').get(0));

    activityTypesViewModel = ko.mapping.fromJS(data);
    ko.applyBindings(activityTypesViewModel, $('.categories-gallery .frame').get(0));

    activeActivityViewModel = ko.mapping.fromJS($('.categories-gallery .frame .category.active').data('wishlist-activity'));
    ko.applyBindings(activeActivityViewModel, $('#details-box').get(0));

请参阅代码中的第一行，我正在获取特定产品的数据。下次如果我使用相同的代码绑定不同产品的数据，绑定不会被更新，而是因为调用 ko.applyBindings() 而多次添加相同的产品

我应该怎么做才能删除旧绑定并将新数据与部分绑定？

Answer 1

停止使用ko.applyBindings不止一次。我觉得这需要进入标签维基。

永远，永远不要这样做。

调用ko.applyBindings一次（每个元素，如果你这样做的话，但仍然是一次）。之后，更新您的视图模型将自动更新绑定的元素。这就是绑定的全部要点。

Answer 2

我找到了解决方案，我必须打电话

ko.mapping.fromJs

并传递需要更新的newdata和viewmodel

ko.mapping.fromJS(data[0].WishlistProduct.WishlistCategory, categoryViewModel);

Answer 3

查看 Knockout.js 官方页面中解决此问题的教程。

简而言之，您应该applyBindings()只调用一次（对于给定的页面部分），并且在检索更新的数据时，您应该像这样用新数据更新可观察视图模型

var updatedCategoryViewModel = ko.mapping.fromJS(data[0].WishlistProduct.WishlistCategory);
categoryViewModel(updatedCategoryViewModel);

Answer 4

希望这对某人有所帮助，Knockout 对我来说是一段旅程，也是一个令人心碎的模特。

单击按钮时，我需要加载或多或少的东西，所以起初我认为这会对我有所帮助，这是我的第一种方法：

var Task = function(name, description) {
    this.name = ko.observable(name);  
    this.description = ko.observable(description);      

}

var ViewModel = function() {
    var self = this;
    self.tasks = ko.observableArray();

    self.clearTask = function(data, event) {

           self.tasks.remove(data);   

    };
    self.addTask = function() {
        var task = new Task("new", "");        
        self.tasks.push(task);
    };
    self.addTask2 = function (name, description)
    {
        var task = new Task(name, description);        
        self.tasks.push(task);
    }

};
var vm = new ViewModel();
vm.addTask2("Dog Food","description");
ko.applyBindings(vm);

function ClickedMoreItems()
{
    vm = new ViewModel()
    vm.addTask2("Dog Food2","description");
    vm.addTask2("Dog Food3","description");    

}
function ClickedLessItems()
{
    vm = new ViewModel()
    vm.addTask2("Dog Food4","description");        

}

一旦我点击 ClickedMoreItems() 什么都没有发生。所以我决定在每个函数中再次使用ko.applyBindings(vm);它，它有点工作。但是当我点击 ClickedLessItems 时，“Dog Food4”被复制了两次。

function ClickedMoreItems()
    {
        vm.Clear();
        vm.addTask2("Dog Food2","description");
        vm.addTask2("Dog Food3","description");    
        ko.applyBindings(vm);        
    }
    function ClickedLessItems()
    {
        vm.Clear();
        vm.addTask2("Dog Food4","description");  
        ko.applyBindings(vm);        
    }

所以我决定这样做并让它发挥作用：

1. 按照Tyrsiusko.applyBindings(vm);的建议，在开始时使用。
2. 创建明确的功能

所以最后的代码是这样的：

var Task = function(name, description) {
    this.name = ko.observable(name);  
    this.description = ko.observable(description);                
}

var ViewModel = function() {
    var self = this;
    self.tasks = ko.observableArray();

    self.clearTask = function(data, event) {

           self.tasks.remove(data);   

    };
    self.addTask = function() {
        var task = new Task("new", "");        
        self.tasks.push(task);
    };
    self.addTask2 = function (name, description)
    {
        var task = new Task(name, description);        
        self.tasks.push(task);
    }
    self.Clear = function()
    {
        self.tasks.removeAll();
    }
};
var vm = new ViewModel();
vm.addTask2("Dog Food","description");
ko.applyBindings(vm);

function ClickedMoreItems()
{
    vm.Clear();
    vm.addTask2("Dog Food2","description");
    vm.addTask2("Dog Food3","description");    

}
function ClickedLessItems()
{
    vm.Clear();
    vm.addTask2("Dog Food4","description");  

}

您可以在此处查看实际代码

Answer 5

要删除绑定使用 ko.cleanNode(element)