Question

我想使用KnockoutJS来映射ajax调用中的对象列表。我也想传递一个映射对象。

按钮点击上的绑定非常有效，如果我跳过映射对象，它会按预期创建所有可观察的属性。

现在我只想创建一些作为observable的属性，所以我尝试传递一个映射对象。但是当我这样做时，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>

提前致谢！

Answer 1

查看文档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 Example

用MappingOptions敲除后期绑定

1 个答案: