Question

我得到了一些点击绑定，它必须将绑定上下文值传递给self函数以进行进一步处理，并且此值已成功传递但是在页面加载时触发功能而不是单击。所以，这是ViewModel：

<script src="../Scripts/knockout.mapping-latest.js"></script>
    <script>
        function UserStatusViewModel() {
            var self = this;
            self.clients = ko.observableArray();
            $.getJSON("/api/users", self.clients);
            self.updatestatus = function () {
                $.getJSON("/api/users", function (data) {
                    ko.mapping.fromJS(data, {}, self.clients);
                });
            }
            //Here I'm getting correct data fom click binding context, but this happend on page load, not on click
            self.modal = function (un) {
                localStorage.clear();
                localStorage.setItem("speakto", un);
                window.location.replace("http://somehost/operator/dialog");
            }
        };
        $(function () {
            var vm = new UserStatusViewModel();
            ko.applyBindings(vm, document.getElementById('users'));
            var chat = $.connection.chatHub;
            chat.client.addChatMessage = function (name, message) {
                vm.updatestatus();
            };
            chat.client.updateStatus = function () {
                vm.updatestatus();
            }
            chat.server.userStatus = function () {
                vm.updatestatus();
            }
            $.connection.hub.start().done(function () {
            });
        });
    </script>

和HTML标记：

<div data-bind="foreach: clients" id="users">
    <div class="dialogs">
        <div class="speech">
            <div class="online">
                <img alt="" data-bind="visible: ko.utils.unwrapObservable(IsOnline) == true" src="../img/online.png">
                <img alt="" data-bind="visible: ko.utils.unwrapObservable(IsOnline) == false" src="../img/offline.png">
            </div>
            <div class="ava">
                <img alt="" data-bind="attr: { src: ko.utils.unwrapObservable(AvaUrl) }">
            </div>
            <div class="name" data-bind="text: ko.utils.unwrapObservable(UserName), click: $root.modal(UserName)"></div>
            <%--<div class="dateok" data-bind="text: $data.Timer"></div>--%>
            <div class="text" data-bind="text: ko.utils.unwrapObservable(LastMessage)"></div>
        </div>
    </div>
</div>

P.S。对不起，伙计们，我确实更改了点击绑定语法太快，当前最新和我正在讨论的那个。

Answer 1

您的点击装订click: $root.modal(UserName)错误，因为您没有传递function，而是函数的结果。因此，KO将在处理绑定时执行一次函数，而不是在单击元素时执行。

如果您想要pass in additional arguments to a click handler:

，您需要使用bind或将其包装到新功能中

<div class="name" data-bind="text: ko.utils.unwrapObservable(UserName), 
                                   click: $root.modal.bind($data, UserName)"></div>

或者

<div class="name" data-bind="text: ko.utils.unwrapObservable(UserName), 
                            click: function() { $root.modal(UserName) }"></div>

注意：您不需要文本绑定中的ko.utils.unwrapObservable（UserName）只需编写text: UserName

但是因为您的UserName是可观察的，所以您需要在modal函数中处理它：

self.modal = function (un) {
    localStorage.clear();
    localStorage.setItem("speakto", ko.utils.unwrapObservable(un));
    window.location.replace("http://somehost/operator/dialog");
}

或确保点击绑定传递的值为click: $root.modal.bind($data, ko.utils.unwrapObservable(UserName))

注意：由于KO 2.3有ko.utils.unwrapObservable的简写，你可以写ko.unwrap

Answer 2

让JS中的viewModel定义为：

viewModel = {
    clickHandler: function(model, e) { alert(JSON.stringify(model)); }
}

然后你可以在标记中用以下方式绑定它：

data-bind="click: clickHandler"

如果单击它，$ data将作为处理程序的“model”参数传递

knockout docs

对此进行了描述

Knockout.js点击绑定奇怪的行为

2 个答案: