javascript - knockout 模板绑定(bind)不更新 UI

Question

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

我的模板:

  <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) 时设置的元素的绑定(bind)

相反，您要做的只是在 viewModel 中已有的可观察量上设置 Description 和 Children 属性

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

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

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