Knockout js可见绑定似乎不起作用答案

【问题标题】：Knockout js visible binding does not seem to be workingKnockout js可见绑定似乎不起作用
【发布时间】：2013-02-18 16:59:42
【问题描述】：

我是 Knockout 的新手，正在创建原型。我正在尝试使用 div 上的可见绑定仅在单击“菜单选项”时显示。但是，当我创建条件时，它似乎不起作用。

这是我的来源：

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
        <script type="text/javascript" src="Scripts/knockout.js"></script>
        <script type="text/javascript" src="Scripts/Models.js"></script>
        <script type="text/javascript">
            $(function () {
                function BillingInformation() {
                    this.accountNumber = ko.observable('4111111111111111');
                    this.cardType = ko.observable('Visa');
                    this.expirationDate = ko.observable('2016-01-15');
                }

                function Invoice(billingDate, amount, paid) {
                    this.billingDate = billingDate;
                    this.amount = amount;
                    this.paid = paid;
                }

                function Pet(name, breed, age) {
                    this.name = name;
                    this.breed = breed;
                    this.age = age;
                }

                function PrototypeViewModel() {
                    this.menu = [{ folderName: 'Customer Information', folderId: 0 },
                                 { folderName: 'Customer Information Edit', folderId: 1 },
                                 { folderName: 'Billing Information Edit', folderId: 2 },
                                 { folderName: 'Pets', folderId: 3 }, 
                                 { folderName: 'Invoices', folderId: 4 }];

                    this.customer = { firstName: 'Wesley', lastName: 'Snipes', email: 'wsnipes@gmail.com' };

                    this.billingInformation = new BillingInformation();

                    this.pets = ko.observableArray(
                        [
                            new Pet('Poopy', 'Great Dane', 3),
                            new Pet('Pokey', 'Great Dane', 2)
                        ]);

                    this.invoices = ko.observableArray(
                        [
                            new Invoice('2012-11-15', 24.35, true),
                            new Invoice('2012-12-15', 24.35, true),
                            new Invoice('2013-01-15', 34.43, false)
                        ]);

                    this.selectedMenuOptionId = ko.observable();
                    this.selectMenuOption = function (menuOption) {
                        this.selectedMenuOptionId = menuOption.folderId;
                    };

                    this.isMenuSelected = function(menuSelected) {
                        return this.selectedMenuOptionId == menuSelected;
                    };
                }

                ko.applyBindings(new PrototypeViewModel());
            });
        </script>
    </head>
    <body>
        <ul data-bind="foreach: menu">
            <li data-bind="text: $data.folderName, click: $root.selectMenuOption"></li>
        </ul>

        <div data-bind="visible: isMenuSelected(0)">
            <p>selected customer menu</p>
        </div>
    </body>
</html>

我试图简单地设置可见条件来进行字符串比较，但这似乎不起作用。正如您现在所看到的，我正在使用 isMenuSelected 函数试图使其工作，但也失败了。我也没有收到任何脚本错误。请问，我在这里错过了什么？

【问题讨论】：

标签： javascript data-binding knockout.js

【解决方案1】：

你已经实现了isMenuSelected

this.isMenuSelected = function(menuSelected) {
    return this.selectedMenuOptionId == menuSelected;
};

但我相信你需要做更多类似的事情

this.isMenuSelected = ko.computed(function () {
    return this.selectedMenuOptionId == menuSelected;
});

【讨论】：

这成功了！所以谢谢。有趣的是，它最初并没有起作用。我必须创建一个名为 self 的变量（从淘汰教程中得到这个想法）并将其设置为“this”。之后，它就完全起作用了！
是的，self 和 this 之间的区别起初似乎有点神秘。很高兴我能帮上忙！

【解决方案2】：

KnockoutJS 仅在绑定以一种可观察的方式进行并且依赖于模型的视图时才有效。在您的代码中，this.isMenuSelected 被声明为函数而不是可观察对象。与其给它一个函数的定义，不如给它一个可观察函数的定义。所以你需要将它定义为

this.isMenuSelected = ko.computed(function () {
                       ...
                      });

以前，ko.computed 被称为ko.dependentObservable。只是为了让您知道您是否使用过早期版本，那么它对您来说不会是新事物。

【讨论】：