使用映射插件时未从服务器更新 Knockout.js 可观察数组答案

【问题标题】：Knockout.js observable array not being updated from the server when using the mapping plugin使用映射插件时未从服务器更新 Knockout.js 可观察数组
【发布时间】：2012-03-30 09:00:55
【问题描述】：

我在使用 Knockout.js 及其映射插件时遇到了一点问题。本质上，我想从没有数据开始，然后在页面加载时发出 Ajax 请求以加载信息。我知道 Ajax 请求正在按预期工作，因为我正在将返回的数据记录到控制台。

    var projectId = @Model.Project.Id;
    var stories;
    viewModel = ko.mapping.fromJS(stories);       

    $.ajax({
        type: "GET",
        url: "/Projects/JsonDetails",
        data: {id: projectId},
        success: function (data) {
            stories = data.stories;
            ko.mapping.fromJS(stories, viewModel);
            console.log(stories);
        }
    });

控制台正在正确记录数据。所以我知道 Ajax 请求工作正常。

查看标记：

   <section id="project-stories"  data-bind="foreach: stories">

            <div class="project-story-container drop-shadow">

                <div class="story-summary">
                    Story Summary
                </div>
                <div class="story" data-bind="attr:{'data-id': Id}">
                    As a <span  class="actor" data-bind="text: Actor"> </span> I want to <span  class="objective" data-bind="text: Objective"> </span>, so that  <span  class="justification" data-bind="text: Justification"></span>.
                </div>
                <div class="story-controls">
                    <a href="#">Edit</a>
                </div>
            </div>
        </section>

我什至试过打电话：

   var projectId = @Model.Project.Id;
    var stories;
    viewModel = ko.mapping.fromJS(stories);
     ko.applyBindings(viewModel);

    $.ajax({
        type: "GET",
        url: "/Projects/JsonDetails",
        data: {id: projectId},
        success: function (data) {
            stories = data.stories;
            ko.mapping.fromJS(stories, viewModel);
            console.log(stories);
        }
    });

但这只会让事情变得更糟，因为 KO 抱怨没有设置绑定。

谁能看到我做错了什么？最终我希望视图模型有更多的事件连接，我知道这将是另一个挑战。但是现在我什至无法在 Ajax 请求完成时正确更新绑定。

在此处关闭教程： http://knockoutjs.com/documentation/plugins-mapping.html

-------- 更新 --------------

我可以通过参考这个 StackExhange 帖子来回答我自己的问题：

Knockout JS mapping plugin confusion

var projectId = @Model.Project.Id;
    var viewModel ={};
    $.ajax({
        type: "GET",
        url: "/Projects/JsonDetails",
        data: {id: projectId},
        success: function (data) {
            viewModel.stories = ko.mapping.fromJS(data.stories);
            ko.applyBindings(viewModel);
        }
    });

问题是我需要一个空视图模型才能使其工作。

【问题讨论】：

标签： .net asp.net-mvc knockout-mapping-plugin knockout-2.0

【解决方案1】：

问题在于您进行映射的方式。您不应该映射 data.stories 而是映射 data 本身 ko.mapping.fromJS(data, viewModel); 这样映射插件将为您可以在模板中使用的故事创建一个可观察的数组。

如果data 包含您不想映射的其他元素，您可以将它们添加到忽略数组中，以便仅映射故事。

还有一件事 - 如果您从没有数据开始，您将在页面加载时收到此错误，因为当此类属性不存在时，Knockout 将尝试在您的视图模型中映射 stories。提前定义您的视图模型以包含 stories 作为可观察数组。

【讨论】：

也许我很困惑。我认为使用映射插件的目的是让我不必定义我所有的 observables。我的理解是调用 'ko.mapping.fromJS(data);'会为我创造它们。如果我有一个带有更多可观察对象的大对象怎么办？
这是正确的 - 它会从对象创建 observables。但是，如果您在定义所有可观察对象（例如页面加载）之前尝试使用您的视图模型，您将收到错误消息（例如未定义您的故事）。
我没有注意到您没有在页面加载时应用绑定，所以显然在这种情况下您不会收到错误。

【解决方案2】：

@Marek Karbarz 你好，我不认为你应该传递整个 viewModel。例如，如果您有一个页面模型，则该模型有一个 SearchCriteria 对象和 Results 对象。当您只需要进行搜索时，为什么还要将 Results 对象传回？

-爱德华

【讨论】：