0

我正在尝试执行以下操作：（请参阅 jsfiddle 中的示例：http: //jsfiddle.net/graphicsxp/QJK99/1/）

javascript:

var originalData = {
id: 1,
name: "Main",
 children: [ { id: 2, name: "bob" }, { id: 3, name: "ted" } ],
selectedChild:  { id: 2, name: "bob" }
};

var viewModel = ko.mapping.fromJS(originalData);

viewModel.selectChild = function(){
   var obj =  { id: 9, name: "new" };

   viewModel.selectedChild(obj);
}  

ko.applyBindings(viewModel);

HTML：

 <button data-bind="click: selectChild">click me</button>

<br/>

 <span data-bind="text: selectedChild.name"></span>

但这不会显示 selectedChild 属性。我究竟做错了什么 ？

[编辑]

我不得不在这段代码中添加括号：

<span data-bind="text: selectedChild().name"></span>

这很好，但我还必须在映射后添加这行代码：

viewModel.selectedChild = ko.observable(viewModel.children()[0]);

这太烦人了。为什么我需要将属性隐式设置为 observable ？另外，如果我不给它一个默认值，它就不起作用。为什么 ？

4

1 回答 1

2

您应该创建selectedChild一个计算出的 observable，它将返回选定的孩子。添加一个可观察的对象，它将跟踪选择的孩子。只需跟踪id（或任何唯一标识孩子的属性）。

var originalData = {
    id: 1,
    name: "Main",
    children: [{
        id: 2,
        name: "bob"
    }, {
        id: 3,
        name: "ted"
    }],
    selectedId: 2
};

var viewModel = ko.mapping.fromJS(originalData);
viewModel.selectedChild = ko.computed(function() {
    var selectedId = this.selectedId(),
        children = this.children();

    // get the first child that has the same id as the selectedId
    return ko.utils.arrayFirst(children, function(child) {
        return child.id() === selectedId;
    });
}, viewModel);

然后，为了让您更轻松地显示选定的孩子，with如果选择了有效的孩子，请使用绑定有条件地呈现。

<div data-bind="with: selectedChild">
    <span data-bind="text: name"></span>
</div>

更新的小提琴

于 2013-03-13T21:49:35.310 回答