Question

我是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函数来尝试使其工作但也失败了。我也没有收到任何脚本错误。拜托，我在这里错过了什么？

Answer 1

您已使用

实施isMenuSelected

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

但我相信你需要做更像

的事情

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

Answer 2

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

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

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

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

2 个答案: