2013-07-25 4 views
0

У меня есть простая программа обучения нокаутом. Я использовал привязку foreach для массива, и он просто отображает заголовок таблицы без привязки datya. Что не так?Проблема с привязкой foreach

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> 
    <title>Hello Knockout.js</title> 
    <script src="Scripts/knockout-2.3.0.js"></script> </head> <body> 
    <h1>Hello Knockout.js</h1> 
    <p><span data-bind='text: fullName'></span>'s Shopping Cart</p> 

    <table> 
     <thead><tr> 
        <th>Product</th> 
        <th>Price</th> 
       </tr></thead> 
     <tbody data-bind='foreach: shoppingCart'> 
      <tr> 
       <td data-bind='text: name'></td> 
       <td data-bind='text: price'></td> 
      </tr> 
     </tbody> 
    </table> 

    <script type="text/javascript"> 
     function PersonViewModel() { 
      this.firstName = ko.observable("John"); 
      this.lastName = ko.observable("Smith"); 
      this.fullName = ko.computed(function() { 
       return this.firstName() + " " + this.lastName(); 
      }, this); 
     }; 

     function Product(name, price) { 
      this.name = ko.observable(name); 
      this.price = ko.observable(price); 
     } 

     var vm = new PersonViewModel(); 
     ko.applyBindings(vm); 

     this.shoppingCart = ko.observableArray([    
      new Product['Beer', 10.99], 
      new Product['Brats', 7.99], 
      new Product['Buns', 1.49] 
     ]); 
      </script> </body> </html> 

ответ

1

Наблюдаемый не ваш сайт! Существует в вашей ViewModel в то время, когда вы применяете привязки к нему. Чтобы исправить это, добавьте корзину покупок в исходную модель представления. Если вы хотите обновить его позже, вы можете.

См JSFiddle

function PersonViewModel() { 
    this.firstName = ko.observable("John"); 
    this.lastName = ko.observable("Smith"); 
    this.fullName = ko.computed(function() { 
     return this.firstName() + " " + this.lastName(); 
    }, this); 

    this.shoppingCart = ko.observableArray([    
     new Product('Beer', 10.99), 
     new Product('Brats', 7.99), 
     new Product('Buns', 1.49) 
    ]); 
}; 

function Product(name, price) { 
    this.name = ko.observable(name); 
    this.price = ko.observable(price); 
} 

var vm = new PersonViewModel(); 
ko.applyBindings(vm); 
+0

Это все еще не работает для меня – user2471435

+0

Добавлен JSFiddle. Были некоторые синтаксические ошибки в ko.observableArray – Sethcran