Question

您好我已经投入了大量时间学习Knockout并且已经达到了我的应用程序中有许多属性的地步，我需要使用映射插件。

看起来应该如何使用它似乎很容易，但我想错过一些东西，因为它不起作用。我创建了一个测试示例。这是我的代码：

 function vm() {
            var self = this;
            this.viewModel = {};
            this.getData = function() {
                $.getJSON('/api/Values/Get').then(data)
                    .fail(error);

                function data(ajaxData) {
                    console.log(ajaxData);
                    self.viewModel = ko.mapping.fromJS(ajaxData);
                    console.log(self.viewModel);
                }

                function error(jError) {
                    console.log(jError);
                }
            };
        };

        ko.applyBindings(new vm());

这是我的HTML：

        <ul data-bind="foreach: viewModel">
        <li data-bind="text:FirstName"></li>
        <input type="text" data-bind="value: FirstName"/>
    </ul>
    <button data-bind="click : getData">Press me!</button>

我的ajax调用成功从服务器检索此数据：

[
   {
     FirstName: "Madalina",
     LastName: "Ciobotaru",
     hobies: [
          "games",
          "programming",
          "hoby"
           ]
   },
   {
     FirstName: "Alexandru",
     LastName: "Nistor",
     hobies: [
        "games",
        "programming",
        "movies"
        ]
   }
]

似乎在调用数据函数后，viewModel get被转换为数组，但没有任何项目。

我做错了什么？

Answer 1

我已经获取了您预期的服务器数据并创建了jsfiddle here。您需要将viewModel属性更改为可观察数组，并更改映射的执行方式。

以下是适用的脚本版本：

function vm() {
    var self = this;
    this.viewModel = ko.observableArray([]);
    this.getData = function() {
        $.getJSON('/api/Values/Get').then(data)
            .fail(error);

        function data(ajaxData) {
            console.log(ajaxData);
            ko.mapping.fromJS(ajaxData, {}, self.viewModel);
            console.log(self.viewModel);
        }

        function error(jError) {
            console.log(jError);
        }
    };
};

ko.applyBindings(new vm());

Knockout映射插件无法正常工作

1 个答案: