0

我想使用 KnockoutJS 在 ajax 调用上映射对象列表。我也想传递一个映射对象。

按钮单击的绑定工作完美，如果我跳过映射对象，它会创建所有可观察到的属性，如预期的那样。

现在我只想要一些创建为可观察的属性，所以我尝试传递一个映射对象。但是当我这样做时，Knockout 创建了一个正确的绑定，但似乎根本没有观察到。仅当我传递有效的映射对象（淘汰文档）时才会发生这种情况。如果我传递了一个无效对象，它会创建一个正确的绑定，所有属性都是可观察的。

你能告诉我我错过了什么吗？

（映射对象既不适用于“观察”也不适用于“复制”）

这是我的 HTML：

<button type="button" data-bind="click: load">Load</button>

<form>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th></th>
            <th>Number</th>
            <th></th>
        </tr>
    </thead>

    <tbody data-bind="foreach: infos">
        <tr>
            <td>
                <input data-bind="value: Name" />
            </td>
            <td data-bind="text: Name"></td>
            <td>
                <input data-bind="value: Number" />
            </td>
            <td data-bind="text: Number"></td>
        </tr>
    </tbody>
</table>
</form>

这是我的 JavaScript：

<script type="text/javascript">

    function ViewModel() {

        var self = this;

        self.mapping = {
            observe: ["Number"]
        };

        self.infos = ko.mapping.fromJS([]);
        //self.infos = ko.observableArray();

        self.load = function () {
            // Ajax-Call
            var data = [{ "Name": "MyName", "Number": "12345" }, { "Name": "MyName", "Number": "12345" }, { "Name": "MyName", "Number": "12345" }];

            self.SuccessfullRetrievedModelsFromAjax(data);
        };

        self.SuccessfullRetrievedModelsFromAjax = function (data) {
            ko.mapping.fromJS(data, self.mapping, self.infos);
        };
    };

    var model = new ViewModel();
    ko.applyBindings(model);

</script>

提前致谢！

4

1 回答 1

0

查看文档observing_only_certain_properties_using_observe。按照提供的示例，您可以observe在直接对象上使用，而不是在数组上使用。

因此，您需要在对象级别而不是数组级别上应用映射。我为你做了简单的代码：

function ViewModel() {

    var self = this;

    self.mapping = {
        //observe: ["Number"]
        create: function (options) {
            //customize at the root level.  
            var innerModel = ko.mapping.fromJS(options.data, { observe: ["Number"] });

            return innerModel;
        }
    };

    self.infos = ko.mapping.fromJS([]);
    //self.infos = ko.observableArray();

    self.load = function () {
        // Ajax-Call
        var data = [{ "Name": "MyName", "Number": "12345" }, { "Name": "MyName", "Number": "12345" }, { "Name": "MyName", "Number": "12345" }];

        self.SuccessfullRetrievedModelsFromAjax(data);
    };

    self.SuccessfullRetrievedModelsFromAjax = function (data) {
        ko.mapping.fromJS(data, self.mapping, self.infos);
    };
}

var model = new ViewModel();
model.load();
console.log(model.infos());

这是一个JSFiddle 示例

于 2013-09-03T12:29:55.473 回答