如何将一个项目从 ko.mapping.fromJS 数组复制到视图模型的另一个属性？

Question

这是在 Knockout 2 上运行现有代码中有用的东西，我正在重构 Knockout 3。

viewmodel 的属性从 feed 初始化（简化代码）：

$.ajax({
    url: "/api/GetData",
    data: {
        clientId: clientId
    },
    type: "GET",
    dataType: "json",
    contentType: 'application/json; charset=utf-8',
    traditional: true,
    success: function (data) {
        viewModel.periods(ko.mapping.fromJS(data)());
        viewModel.selectedPeriod = ko.observable(viewModel.periods()[0]);
    },
    async: false
});

当我调试该值时，viewModel.selectedPeriod = 行有效，但绑定不起作用。

所以这失败了...

<ul data-bind="foreach: selectedPeriod.Years">
    <li data-bind="text: Year"></li>
</ul>

...虽然这有效：

<ul data-bind="foreach: periods">
    <li>
        <ul data-bind="foreach: Years">
            <li data-bind="text: Year"></li>
         </ul>
    </li>
</ul>

我用简化的 Fiddle 重现了我的问题：https://jsfiddle.net/frankvaneykelen/w3opn442/12/

Answer 1

只需对您的代码进行一些更改...

viewModel.selectedPeriod(viewModel.periods()[0]); // observable method call instead of assigning

.....

 <ul data-bind="foreach: selectedPeriod().Years">  // resolve the observable first ...

可在此处找到工作代码

https://jsfiddle.net/0cLtvqz0/4/

Answer 2

您需要使用 with 绑定来正确缩小您的上下文范围：

https://jsfiddle.net/lobotomize/w3opn442/13/

注意 with 绑定在外部 div

    <div class="col-xs-6" data-bind="with: selectedPeriod">
         <h5>selectedPeriod.Years</h5>
        <ul data-bind="foreach: Years">
            <li data-bind="text: Year"></li>
        </ul>
    </div>

如何将一个项目从 ko.mapping.fromJS 数组复制到视图模型的另一个属性？

How do I copy an item from a ko.mapping.fromJS Array to another property of the viewmodel?

javascript

knockout-mapping-plugin

knockout.js

如何将一个项目从 ko.mapping.fromJS 数组复制到视图模型的另一个 属性？

How do I copy an item from a ko.mapping.fromJS Array to another property of the viewmodel?

javascript

knockout-mapping-plugin

knockout.js

如何将一个项目从 ko.mapping.fromJS 数组复制到视图模型的另一个属性？