双击事件后的敲除绑定答案

【问题标题】：Knockout binding after double click event双击事件后的敲除绑定
【发布时间】：2015-01-11 08:52:22
【问题描述】：

我创建了一个 js 函数，用于切换对象上的属性的布尔值（位于数组中。总结一下我想要做的事情，我有 2 个列表。如果布尔属性，则一个列表显示项目为假。如果为真，另一个列表将显示一个项目（因此切换功能）。

我的问题是当我将切换功能绑定到双击事件（正确触发，通过调试器验证）时，我似乎无法正确绑定（或者可能完全是另一个问题）。如果我手动放置带有硬编码“Id”值的切换功能（确定数组中的哪个项目将被切换），则绑定工作正常并且项目出现在第二个列表中。

var TestNWJS = TestNWJS || {};

TestNWJS.QualificationList = (function () {

    //private functions
    function CreateQualificationModel(allCredentialsList) {
        TetsNWJS.QualificationList.ViewModel = {};
        TestNWJS.QualificationList.ViewModel.AllCredentials = ko.observableArray(allCredentialsList);

    }
    function toggleselected(allCredentialsList, id) {

        var credential = ko.utils.arrayFirst(allCredentialsList, function (credential) {
            var stringToInt = parseInt(id);
            return credential.Id === stringToInt;
        });

        if (credential.Selected == false) {
            credential.Selected = true;
        }
        else {
            credential.Selected = false;
        }

        return credential;
    }

    //public function
    return {
        Init: function (allCredentialsList) {

            CreateQualificationModel(allCredentialsList);
            toggleselected(allCredentialsList, 51); // THIS IS THE HARDCODED TEST, IT WORKS 


            //THIS IS WHAT I WANT TO WORK CORRECTLY:
            $("#allCredentials").live('dblclick', function (e) { 
                toggleselected(allCredentialsList, this.value);
            });

            ko.applyBindings(TetsNWJS.QualificationList.ViewModel);


        }
    }

})();

【问题讨论】：

你能把它放在一个小提琴中以了解什么不起作用吗？此外，您正在尝试从视图模型中添加它，但我建议创建一个快速自定义绑定处理程序来执行此操作。另外您使用的是哪个版本的 jQuery？

标签： html knockout.js

【解决方案1】：

只是为了测试这一点，我在小提琴中做了以下 -

http://jsfiddle.net/pwkad/uend52s5/

$("#container").on('dblclick', function (e) {
    console.log('double clicked it');
});

通过在最新版本的 jQuery 中切换到 on 它对我有用

【讨论】：

【解决方案2】：

您如何测试您的代码？查看您发布的代码，看起来 Selected 属性的值正在以正确的方式发生变化。但是，它不是可观察的，因此您不会将结果反映在屏幕上。

尝试为每个凭据创建一个类，以及一个可观察的“Selected”属性：

function Credential(id, selected)
{
   this.id = id;
   this.selected = ko.observable(selected);
}

TestNWJS.QualificationList.ViewModel.AllCredentials = ko.observableArray(allCredentialsList.map(function(item){ return new Credential(item.id, item.selected);}));

更新

这是一个带有简单示例的代码笔。有一个带有对象列表的视图模型，每个对象都有一个可观察的属性。还有第二个计算属性，它只过滤选定的项目：

http://codepen.io/adilsonjr/pen/yygxbg

【讨论】：

这会在我的视图模型中吗？
是的。它应该在您的视图模型中。