javascript - Knockout.js 点击绑定(bind)异常行为

Question

我得到了一些点击绑定(bind)，它必须将绑定(bind)上下文值传递给 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>  

附言抱歉，我确实更改了点击绑定(bind)语法太快了，current 是最新的，也是我正在谈论的那个。

Answer 1

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

如果要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>

注意:您不需要在文本绑定(bind)中使用 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");
}

或者确保点击绑定(bind)通过点击传入值:$root.modal.bind($data, ko.utils.unwrapObservable(UserName))

注意:自 KO 2.3 以来，ko.utils.unwrapObservable 有了简写，您可以只写 ko.unwrap