Question

当我使用foreach数据绑定时，似乎打破了$root上下文的淘汰赛。

当发生这种情况时this引用一个元素（user），它是视图模型（page）的子元素和foreach元素的父元素（requests），什么时候应该引用viewmodel（page）。

我在foreach之外引用$root没有问题 - 它在正确的上下文中调用正确的方法。

HTML工作原理：

<div id="home-page-view" class="view" data-bind="if: status() == AppStatus.Home">
        <button data-bind="click: $root.switchState">Switch To Friend Requests</button>
</div>

打字稿的工作原理：

public switchState() {
        if (this.status() == AppStatus.Home) {
            this.status(AppStatus.FriendRequests); //this refers to viewmodel (page)
        } else {
            this.status(AppStatus.Home);
        }
    }

但是，在foreach中，按data-bind="click: $root.acceptFriendRequest"绑定的按钮会成功调用其方法，但this引用user，而不是page。

HTML破碎的地方：

<div id="friend-requests-view" class="view" data-bind="if: status() == AppStatus.FriendRequests">
    <h1>Friend Requests</h1>
    <p>View your pending friend requests.</p>

    <div data-bind="with: user">
        <div data-bind="foreach: requests">
            <div>
                <h2 data-bind="text: firstName"></h2>
                <p data-bind="text: lastName"></p>
            </div>
            <div>
                <input type="button" value="Accept" data-bind="click: $root.acceptFriendRequest" />
                <input type="button" value="Deny" data-bind="click: $root.rejectFriendRequest" />
            </div>
        </div>
    </div>
</div>

打字的打字稿

public acceptFriendRequest(newFriend: UserModel) {
        this.respondToFriendRequest(true, newFriend);
}

public rejectFriendRequest(notFriend: UserModel) {
        this.respondToFriendRequest(false, notFriend);
}

即使在破坏的HTML中，status()之前的4行隐含地引用了正确的$root。

这里有什么使this引用page.user而不是page？鉴于在其他情况下this引用page，$root似乎应该始终返回page。

MCVE：

page.html中

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />

    <script type="text/javascript" src="/Scripts/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="/Scripts/jquery-ui-1.11.4.js"></script>
    <script type="text/javascript" src="/Scripts/knockout-3.3.0.js"></script>
    <script type="text/javascript" src="/Scripts/knockout.mapping-latest.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="DTO/DTOs.js"></script>
</head>

<body>
    <div id="home-page-view" class="view" data-bind="if: status() == AppStatus.Home">
        <button data-bind="click: $root.switchState">Switch To Friend Requests</button>
    </div>

    <div id="friend-requests-view" class="view" data-bind="if: status() == AppStatus.FriendRequests">
        <h1>Friend Requests</h1>
        <p>View your pending friend requests.</p>

        <div data-bind="with: user">
            <div data-bind="foreach: requests">
                <div>
                    <h2 data-bind="text: firstName"></h2>
                    <p data-bind="text: lastName"></p>
                </div>
                <div>
                    <input type="button" value="Accept" data-bind="click: $root.acceptFriendRequest" />
                    <input type="button" value="Deny" data-bind="click: $root.rejectFriendRequest" />
                </div>
            </div>
        </div>
    </div>
</body>
</html>

App.ts

/// <reference path="Scripts/typings/jquery/jquery.d.ts" />
/// <reference path="Scripts/typings/jqueryui/jqueryui.d.ts" />
/// <reference path="Scripts/typings/knockout/knockout.d.ts" />
/// <reference path="Scripts/typings/knockout.mapping/knockout.mapping.d.ts" />


var page: App;

$(document).ready(function () {
    $.ajaxSetup({ cache: false });
    page = new App();
    ko.applyBindings(page);
});


class App {

    public user: KnockoutObservable<UserModel>;
    public status: KnockoutObservable<AppStatus> = ko.observable(AppStatus.Home);

    constructor() {
        this.user = ko.observable(new UserModel());
        var us: User = {firstName: "Chip", lastName: "Dipson" };
        this.user(ko.mapping.fromJS(us));
        this.user().requests.push(new UserModel());
    }

   public switchState() {
        if (this.status() == AppStatus.Home) {
            this.status(AppStatus.FriendRequests);
        } else {
            this.status(AppStatus.Home);
        }
    }

    public acceptFriendRequest(newFriend: UserModel) {
        this.respondToFriendRequest(true, newFriend); //this is wrong
    }

    public rejectFriendRequest(notFriend: UserModel) {
        this.respondToFriendRequest(false, notFriend); //this is wrong
    }

    private respondToFriendRequest(accepted: boolean, requester: UserModel) {
      //do some ajax stuff
    }
}

enum AppStatus {
    Home, FriendRequests
}

DTOs.ts

class User {
    firstName: string;
    lastName: string;

    requests: User[];
}

class UserModel {
    firstName: KnockoutObservable<string> = ko.observable("");
    lastName: KnockoutObservable<string> = ko.observable("");

    requests: KnockoutObservableArray<UserModel> = ko.observableArray<UserModel>(null);
}

Answer 1

click绑定需要一个函数，而不是一段代码。这意味着$ root不提供执行上下文，它只是帮助您找到该功能。如果您想要设置执行上下文，则需要bind：

<input type="button" value="Accept" data-bind="click: $root.acceptFriendRequest.bind($root)" />

在foreach绑定中，Knockout $ root上下文是错误的

1 个答案: