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对象绑定到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);
};

Answer 2

您正在从不是可观察事件的对象中删除该属性。您是否有任何理由不能将价格值设置为可观察的this.Price(null)？这将触发更新UI所需的可观察的更改。

如何从Knockout.js中删除嵌套对象，同时删除渲染模板

2 个答案: