javascript - 如何从 Knockout.js 中删除嵌套对象并同时删除渲染的模板

Question

我有以下knockout.js映射代码:

    //JSON string
    var startData= {"Name":"SMT","Price":{"Value":22,"Currency":"EUR"}}";

    //convert json to model
    var viewModel = ko.viewmodel.fromModel(startData);

    viewModel.deletePrice= function() {
        delete this.Price;
    };

  ko.applyBindings(viewModel);

然后，我有以下模板，在页面上显示 Price 嵌套对象:

<script type="text/html" id="PriceTemplate">
//render Value and Currency properties from nested object Price
</script>

然后在我的代码中，我将 Price 对象绑定(bind)到 teplate PriceTemplate - 这一切都正常。

<div data-bind="template: { name: 'PriceTemplate', data: Price, templateOptions: { title: 'Prc'} }"></div>

    <a href="#" data-bind="click: function() { deletePrice() }">Delete Price</a>

问题出在这个函数deletePrice()。调用时，它会删除嵌套对象 Price，但模板仍以初始数据呈现在页面上。

我的问题 - 如何删除 Price 嵌套对象并同时删除渲染的模板？

Answer 1

我刚刚找到了一个解决方案(using ViewModel knockout extension):

var viewModel = ko.viewmodel.fromModel(startData,{
    extend:{
        "{root}.Price":function(obj){
     return typeof(obj) == "object" ? ko.observable(obj) : ko.observable(null);    
                        }
    }
});

viewModel.deletePrice = function() {
    this.Price(null);
};