Question

我陷入了淘汰JS绑定问题。我有一个主视图模型，它绑定到我的单页面应用程序的shell页面。此masterviewmodel控制当前可见的视图（使用Sammy JS）。它还包含对绑定到视图的子视图模型的引用。

var app = function () {
    var self = this;

    self.State = ko.observable('home');

    self.Home = ko.observable(new homepageVm());
    self.User = ko.observable(new userInfoVm());
    self.Request = ko.observable(new requestVm());
};

User viewmodel有一个要绑定的视图，如下所示：

<div data-bind="with: User, visible: State() === 'user'">
    .. snip ..
</div>

with：绑定可确保将正确的子视图模型绑定到视图。这种方法适用于主视图和userinfo视图。

requestVm使用向导样式UI，需要绑定到多个视图。这就是我目前陷入困境的地方。

<div data-bind="with: Request, visible: State() === 'request-step-1'">
    .. snip ..
</div>

<div data-bind="with: Request, visible: State() === 'request-step-2'">
    .. snip ..
</div>

<div data-bind="with: Request, visible: State() === 'request-step-3'">
    .. snip ..
</div>

当我启动网站时，绑定似乎工作正常（Knockout没有抛出任何绑定错误）但是当我开始通过VM推送数据时，他们不再更新UI，就像所有绑定都被破坏一样（即使是具有绑定到它们的单个视图，例如用户VM）。

如果我只包含向导第一步的视图，这使我在请求VM上只有一个绑定而不是三个，那么应用程序中的所有绑定都会重新开始工作！

我迷失了导致这种情况的原因。敲除只能将一个observable绑定到一个单独的元素吗？或者我尝试了一些不受支持的东西？

更新似乎我的VM中的observableArrays正在发生一些事情。对简单可观察对象的绑定工作正常。

以下是其中一个虚拟机：

    function userInfoVm() {
    var self = this;

    self.UserName = ko.observable();

    self.Beun = ko.observable();

    self.LoadingUser = ko.observable(false);
    self.LoadingObjects = ko.observable(false);

    self.UserData = ko.observableArray([]);
    self.UserObjects = ko.observableArray([]);

    self.LoadUser = function (userName) {

        self.LoadingUser(true);

        $.get('UserData/UserDetail', { username: userName }, function (details) {
            self.UserData(details);
            self.Beun(JSON.stringify(details));

            self.LoadingUser(false);
        });
    };

    self.LoadObjects = function (userName) {

        self.LoadingObjects(true);

        $.get('UserData/UserObjects', { username: userName }, function (objects) {
            alert(JSON.stringify(objects));
            self.UserObjects([objects]);
            self.LoadingObjects(false);
        });
    };

    self.Load = function (userName) {
        self.UserName(userName);

        self.UserData(null);
        self.UserObjects(null);

        self.LoadUser(userName);
        self.LoadObjects(userName);
    };
};

正在消耗来自所述VM的数据的视图：

<div data-bind="with: User, visible: State() === 'user'">
    <h1>
        <button class="backbutton" onclick="history.back();">
        </button>
        Details for user <span data-bind="text: UserName"></span>
    </h1>
    <div class="display detail">
        <table>
            <tbody data-bind="foreach: UserData">
                <tr>
                    <td class="property" data-bind="text: Key">
                    </td>
                    <td class="value" data-bind="text: Value">
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="loader" data-bind="visible: LoadingUser">
            Please wait while we process your request...
        </div>
    </div>
    <div class="display detail">
        <h1>
            Objects and services for user <span data-bind="text: UserName"></span>
        </h1>
        <table class="detailtable">
            <tbody data-bind="foreach: UserObjects">
                <tr>
                    <td class="value">
                        <a class="service" data-bind="text: Value, attr: { href: '#/service/' + Key }" href="#">
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="loader" data-bind="visible: LoadingObjects">
            Please wait while we process your request...
        </div>
    </div>
    Details for user <span data-bind="text: Beun"></span>
</div>

数组没有通知UI关于提供给它们的数据。其他可观察对象，包括.Beun，包含来自AJAX调用的字符串化数据，将按预期更新。

Answer 1

您从服务器收到的内容是什么？

您可以尝试将数据（字符串）转换为具有eval（对象）的对象，并使用foreach循环内的映射插件（knockout.mapping.js）将它们转换为可观察数组（如果您想手动执行此操作）

var data = '[{ "Id": 1, "Titel": "Title1", "Description": "Description 1" }, { "Id": 2, "Titel": "Title 2", "Description": "Description 2" }, { "Id": 3, "Titel": "Title 3", "Description": "Description 3"}]';
//fist convert your string to JS-objects using eval() ; then to observableArray using mapping pluging
self.UserObjects = ko.mapping.fromJS(eval(data));

将Knockout子视图模型绑定到多个视图？

1 个答案: