Knockout js visible binding не работает

Я новичок в Knockout и создаю прототип. Я пытаюсь использовать видимую привязку на div, чтобы отображать ее только при нажатии «пункт меню». Однако, когда я создаю условие, оно не работает.Knockout js visible binding не работает

Вот мой источник:

<!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: '[email protected]' }; 

        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, пытаясь заставить ее работать, но это тоже не удалось. Я тоже не получаю никаких ошибок скрипта. Пожалуйста, что мне здесь не хватает?

источник

2013-02-18 The Sheek Geek

Вы реализовали isMenuSelected с

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

, но я считаю, что вам нужно сделать что-то больше похоже на

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

источник

2013-02-18 17:03:00 bdesham

Это сработало! Так что спасибо тебе. Самое смешное, что он не работал изначально. Мне пришлось создать переменную self (получив идею из учебника нокаута) и установить ее в «this». После этого он работал полностью! –

Да, разница между 'self' и' this' кажется сначала немного загадочной. Рад, что смог помочь! – bdesham

KnockoutJS работает только, если привязка сделана таким образом, чтобы можно наблюдать и просматривать в зависимости от модели. Здесь в вашем коде this.isMenuSelected объявлен как функция, а не наблюдаемый. Вместо того, чтобы давать ему определение функции, дайте ему определение наблюдаемой функции. Таким образом, вы должны определить его как

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

Ранее ko.computed называлась ko.dependentObservable. Чтобы сообщить вам, если вы использовали более ранние версии, это не будет для вас новой.

источник

2013-02-18 17:19:55

Knockout js visible binding не работает

ответ

Смежные вопросы