我如何重置列表视图模型答案

【问题标题】：How can i reset list viewModel我如何重置列表视图模型
【发布时间】：2014-10-11 03:47:20
【问题描述】：

我有一个与 Knockoutjs 实例相同的模型列表：http://jsfiddle.net/rniemeyer/7RDc3/

主要：

var viewModel = new GiftModel([
{ name: "Tall Hat", price: "39.95"},
{ name: "Long Cloak", price: "120.00"}
]);
ko.applyBindings(viewModel);

如何通过按钮单击事件 (not use knock out event) 将对象 viewModel 重置为 null 或 new GiftModel([])，我希望每当单击按钮时，网格都会清空礼物。示例：

$( "#button" ).click(function() {
clearKnockOutViewModel();
});

---> viewModel 会清空，html 会清空。

【问题讨论】：

您不能（轻松地）创建新的视图模型并绑定它，而且您可能不想这样做。您想要重置当前视图模型中的数据。这可以通过将所有可观察对象设置回其初始状态来完成。如果您显示 GiftModel 构造函数的代码，我们可以建议您如何实现这一点。
您要清理节点吗？或者只是清除视图模型并重新应用绑定？
我只想清除视图模型并重新应用绑定

标签： jquery mvvm knockout.js

【解决方案1】：

您可以使用for 弹出每个项目。

<button data-bind='click: clearGifts'>Clear Gifts</button>

self.clearGifts = function() {
    var length = self.gifts().length;
    for (var i = 0 ; i < length ; i++) {
       self.gifts.pop();
    }
};

编辑：如果礼物是 observableArray，你可以使用 removeAll。

self.clearGifts = function() {
    self.gifts.removeAll();
};

【讨论】：

(不使用淘汰事件),$( "#event" ).click(function() { clearKnockOutViewModel(); });
如果gifts是一个observableArray你也可以调用"gifts.removeAll()"
@BenjaminPaul，随意编辑，但 OP 无论如何都想使用 jquery
为完整性编辑！

【解决方案2】：

这将是正确的方法。

$( "#button" ).click(function() {
clearKnockOutViewModel();
});

function clearKnockOutViewModel(){
  var element = $('#elementId')[0]; 
  ko.cleanNode(element);
  ko.applyBindings(viewModel, element);
}

如果你清空它，你将失去 viewModel 逻辑。

【讨论】：