Knockout.js點擊綁定奇怪的行為

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>  

PS對不起伙計們，我確實改變了點擊綁定語法太快，當前是最新的，我正在談論的那個。

Answer 1

您的點擊綁定click: $root.modal(UserName)是錯誤的，因為您沒有傳入function但是function的結果。 所以KO會在處理綁定時執行一次函數，而不是在單擊元素時執行。

如果要將其他參數傳遞給單擊處理程序，則需要使用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傳遞值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”參數傳遞

它在淘汰文檔中描述