Question

我正在处理大量的json，数据是这样的：

{
    "name": "John Smith",
    "age": 32,
    "employed": true,
    "address": {
        "street": "701 First Ave.",
        "city": "Sunnyvale, CA 95125",
        "country": "United States"
    },
    "children": [
        {
            "name": "Richard",
            "age": 7,
            "field": {
                "field": "value"
            }
        }
    ]
}

每当我更改任何内容时，我都会得到一个与之前数据有些相似的新响应，但是如果添加了新属性，则可能已删除了某些内容等等。

我的测试代码是这样的（不介意这里有无数的不良做法）：

<div data-viewmodel="whatevz">
    <span data-bind="text: stuff['nested-thingy']"></span>
</div>
<script>
    function vm() {
        var self = this;
        this.stuff = ko.observable();

        require(["shop/app"], function (shop) {
            setTimeout(function () {
                self.stuff(shop.stuff);
            }, 1200);
        });
    }

    ko.applyBindings(new vm(), $("[data-viewmodel]")[0]);
</script>

我想要在更新内容时更新东西['nested-thingy']。如果没有各种映射并使所有内容都可观察，我该怎么做呢？

Answer 1

您只需要更新您的招标：

<div data-viewmodel="whatevz">
    <span data-bind="text: stuff()['nested-thingy']"></span>
</div>

您必须使用（）访问observable的值。返回您的对象，然后您可以访问它。绑定的内容仍然依赖于可观察的东西，因此每当更新内容时它都应该更新。

至少我的小提琴是这样工作的：http://jsfiddle.net/delixfe/guM4X/

<div data-bind="if: stuff()">
    <span data-bind="text: stuff()['nested-thingy']"></span>
</div>
<button data-bind="click: add1">1</button>
<button data-bind="click: add2">2</button>

请注意data-bind="if: stuff()。如果您的东西的内容在绑定时或以后是空的，那么这是必要的......

function Vm() {
    var self = this;
    self.stuff = ko.observable();

    self.add1 = function () {
        self.stuff({'nested-thingy': "1"});
    };

    self.add2 = function () {
        self.stuff({'nested-thingy': "2"});
    };        


}

ko.applyBindings(new Vm());

Answer 2

您有什么理由不能使用mapping plugin来处理映射吗？您可以将复制选项用于您不希望成为可观察对象的属性：

var mapping = {
    'copy': ["propertyToCopy"]
}
var viewModel = ko.mapping.fromJS(data, mapping);

大嵌套JSON数据并在更改时更新DOM

2 个答案: