敲除模板绑定不更新 UI

Question

我有绑定到我的模型的递归模板。问题是我一次修改一个对象，所以如果我单击下一个对象并尝试加载新对象，模板不会更新。

我的模板：

  <div class="portlet-body" id="details-container" data-bind="template: { name: 'packageTemplate', data: viewModel.packageElements() }"></div>

我的模特：

var viewModel;
function packageElementViewModel(data) {
    var self = this;
    self.packageElements = ko.observable({ Description: ko.observable(), Children:        ko.observableArray() });
}

我的初始化：

$.ajax({
    'type': 'POST',
    'url': 'http://www.someurl.com/',
    'data': { PackageId: 1},
    'success': function (data) {
        viewModel.packageElements = ko.observable(ko.mapping.fromJS(data));
        ko.applyBindings(viewModel);
    });

当我选择一个新包时，我调用此代码并更新变量，但 UI 没有更新。：

        var id = PackageSummary.packageTable.fnGetData($(this).get(0))['Id'];
        $.ajax({
            'type': 'POST',
            'url': 'http://www.someurl.com',
            'data': { PackageId: id },
            'success': function (data) {
                viewModel.packageElements = ko.observable(ko.mapping.fromJS(data));
            },
            'error': function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.responseText);
            }
        });

这是我的数据：

    {
        "Description":"Top",
        "Children":[
            {
                "Description":"Second-Level 1",
                "Children":[
                    {
                        "Description":"Third Level 1",
                        "Children":[]
                    },
                    {
                        "Description":"Third Level 2",
                        "Children":[]
                    },          
                    {
                        "Description":"Third Level 3",
                        "Children":[]
                    }
                ]
            },
            {
                "Description":"Second Level 2":[
                    {
                        "Description":"Third Level 1",
                        "Children":[]
                    },
                    {
                        "Description":"Third Level 2",
                        "Children":[]
                    },
                    {
                        "Description":"Third Level 3",
                        "Children":[]
                    }
                ]
            }
        ]
    }

Answer 1

我相信问题是您在 ajax 调用的成功方法中重置 packageElements

'success': function (data) {
     viewModel.packageElements = ko.observable(ko.mapping.fromJS(data));
}

这破坏了与您调用 ko.applyBindings(viewModel) 时设置的元素的绑定

您想要做的只是在 viewModel 中已经存在的 observables 上设置 Description 和 Children 属性

'success': function (data) {
    viewModel.packageElements().Description(data.Description);
    viewModel.packageElements().Children(data.Children);
}

我做了一个例子，基本上做同样的事情，但数据不同。 http://jsfiddle.net/vGuHU/

另外，作为旁注。从您发布的代码来看，packageElements 没有真正的理由成为ko.observable()