Knockout.js 如何在knockoutjs中更新绑定或删除早期绑定

我有以下代码从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而多次添加相同的产品

如何删除旧绑定并将新数据与节绑定？

停止多次使用ko.applyBindings。我觉得这需要放到TagWiki中

永远不要这样做

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

停止多次使用ko.applyBindings。我觉得这需要放到TagWiki中

永远不要这样做

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

请查看Knockout.js官方页面中解决此问题的链接

简而言之，您应该只为给定的页面部分调用一次applyBindings，并且在检索更新的数据时，您应该只使用如下所示的新数据更新observable视图模型

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

请看一下Knockout.js官方页面中关于这个问题的介绍

简而言之，您应该只为给定的页面部分调用一次applyBindings，并且在检索更新的数据时，您应该只使用如下所示的新数据更新observable视图模型

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

---

我已经找到了解决办法，我必须打电话

ko.mapping.fromJs

并传递需要更新的newdata和viewmodel，如下所示

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

---

我已经找到了解决办法，我必须打电话

ko.mapping.fromJs

并传递需要更新的newdata和viewmodel，如下所示

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

---

要删除绑定，请使用ko.cleanNodeelement

要删除绑定，请使用ko.cleanNodeelement

希望这对某人有所帮助，淘汰赛对我来说是一个旅程，也是一个令人心碎的模式

我需要在点击按钮时加载更多或更少的内容，所以起初我认为这会对我有所帮助，这是我的第一个方法：

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");        

}

一旦我点击了ClickedMore，什么都没发生。所以我决定在每个函数中再次使用ko.applyBindingsvm；而且它有点起作用了。但当我点击无点击站点时，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);        
    }

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

使用ko.applyBindingsvm；正如泰尔修斯建议的那样，刚开始。 创建一个清晰的函数 最后的代码是：

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");  

}

---

你可以看到代码在运行

希望这能帮助别人，淘汰赛对我来说是一段旅程，也是一个令人心碎的模型

我需要在点击按钮时加载更多或更少的内容，所以起初我认为这会对我有所帮助，这是我的第一个方法：

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");        

}

一旦我点击了ClickedMore，什么都没发生。所以我决定在每个函数中再次使用ko.applyBindingsvm；而且它有点起作用了。但当我点击无点击站点时，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);        
    }

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

使用ko.applyBindingsvm；正如泰尔修斯建议的那样，刚开始。 创建一个清晰的函数 最后的代码是：

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");  

}

---

您可以看到正在运行的代码

我已经删除了应用绑定，现在只是更新模型，但是仍然没有luckI删除了应用绑定，现在只是更新模型，但是仍然没有luckI调用ko.applyBindings on document load only，现在只从ajax数据更新模型，但是页面数据仍然没有更新。您可以发布吗你的一些代码，也许是一把小提琴。Its's not update不足以解决这个问题，可能是因为knockout.js太难理解/调试了。我想接下来的选择是a停止使用knockout.js，b如果你坚持使用knockout.js，那么就做对了。@HamishGrubijan我想你可以责怪knockout，但我认为这不公平。如果这家伙在网站上看过教程，他就会知道他做得不对。无论工具使用多么简单，总有一种方法会导致错误使用。人们拿起螺丝刀像锤子一样使用它，这不是螺丝刀上的反映。泰尔修斯，我也是那个家伙。我阅读了教程，花了一天的时间试图在一个大型项目中触发某些事件，而不是一个带有按钮示例的标签，然后说“去他妈的，用jQuery中的几行代码来完成”——手动更新DOM，而不是试图修改数组中可观察的部分。我想不出调试淘汰库的好方法，因此我并不热衷于学习它。JS/jQuery的东西——我在浏览器中有一个调试器和一个REPL

---

我看到了ajax数据，但是页面数据仍然没有更新。你可以发布一些代码吗，也许是在一个小提琴里。Its's not update不足以解决这个问题，可能是因为knockout.js太难理解/调试了。我想接下来的选择是a停止使用knockout.js，b如果你坚持使用knockout.js，那么就做对了。@HamishGrubijan我想你可以责怪knockout，但我认为这不公平。如果这家伙在网站上看过教程，他就会知道他做得不对。无论工具使用多么简单，总有一种方法会导致错误使用。人们拿起螺丝刀像锤子一样使用它，这不是螺丝刀上的反映。泰尔修斯，我也是那个家伙。我阅读了教程，花了一天的时间试图在一个大型项目中触发某些事件，而不是一个带有按钮示例的标签，然后说“去他妈的，用jQuery中的几行代码来完成”——手动更新DOM，而不是试图修改数组中可观察的部分。我想不出调试淘汰库的好方法，因此我并不热衷于学习它。JS/jQuery的东西——我在浏览器中有一个调试器和一个REPL。