2

私は 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 関数を使用していますが、これも失敗しました。スクリプト エラーも発生しません。ここで何が欠けていますか？

4

2 に答える 2

3

で実装isMenuSelectedしました

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

しかし、私はあなたがもっと何かをする必要があると信じています

this.isMenuSelected = ko.computed(function () {
    return this.selectedMenuOptionId == menuSelected;
});
于 2013-02-18T17:03:00.507 に答える
0

KnockoutJS は、バインディングが観察可能であり、モデルに依存するビューを作成する方法で作成されている場合にのみ機能します。ここのコードではthis.isMenuSelected、オブザーバブルではなく関数として宣言されています。関数の定義を与えるのではなく、観測可能な関数の定義を与えます。したがって、次のように定義する必要があります

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

以前は、ko.computedは として呼び出されていましko.dependentObservableた。以前のバージョンを使用したことがあるかどうかを知らせるためだけに、それはあなたにとって新しいことではありません.

于 2013-02-18T17:19:55.963 に答える