如何使用 knockout.js 更新模型更改的视图？

Question

如何更新视图以更改视图模型代码中发生的情况？

下面的应用程序显示条目列表并更新总数。它可以工作，我可以将更新的数据取出并放入 JSON 对象，并且可以在单击按钮时使用修改后的数据更新模型变量。

console.log(ko.toJSON(self.List()));  

点击按钮时视图不会更新

<span data-bind="text: jsonList"></span>

我需要做什么来更新视图？我尝试了以下变体：

self.jsonList=ko.observable(ko.toJSON(self.List()))
self.show = function(){//the button click function
    self.jsonList = ko.computed(function(){
        var newval = self.jsonList()
        newval = ko.toJSON(self.List())
        console.log(jsonList())
        //newval.valueHasMutated();
        return newval;
    })
}

Here is the fiddle

Answer 1

您的代码没有正确更新 observable 下面是您的代码的修改版本，它在点击时更新 JSON 字符串，以及通过计算的 observable (jsonList2) 实现它

分叉的小提琴可以在http://jsfiddle.net/n0jfhs8k/2/找到

self.show = function(){//the button click function
    self.jsonList(ko.toJSON(self.List()));
}

self.jsonList2 = ko.computed(function(){
        var newval = self.jsonList()
        newval = ko.toJSON(self.List())
        return newval;
    });