無法處理綁定foreach與無法讀取屬性

我的整個代碼工作良好，然後我添加刪除功能的演示代碼。儘管我使用$root調用此綁定，但它給出了相同的錯誤。我也附上我得到的錯誤的屏幕截圖。無法處理綁定foreach與無法讀取屬性

//my product class 
      function Product(name, price) { 

       this.name = ko.observable(name); 
       this.price = ko.observable(price); 

      }; 

    //my observable array 
      this.shoppingCart = ko.observableArray([ 

       new Product("milk", 10.99), 
       new Product("bread", 7.99), 
       new Product("Jam",1.39) 

      ]);  


    //below is my view model 

      function personViewModel() { 
       var self = this; 

       firstName= ko.observable("John"); 
       lastName = ko.observable("Smith"); 
       checkOut = function() { 
        alert("Trying to Checkout"); 
       }; 

       fullName = ko.computed(function() { 
        return firstName() + " " + lastName(); 
       }) 

       this.addProduct = function() { 

        self.shoppingCart.push(new Product("Yogurt", 10.99)); 

       }; 

       //this method is bind with the button and producing error 
       this.removeProduct = function (product) { 
        self.shoppingCart.remove(product) 
       }; 

      }; 
      ko.applyBindings(personViewModel); 

<!-- language: lang-html --> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script> 
    <body> 
     <h1>Hello, Knockout.js</h1> 
     <p><span data-bind='text: fullName'></span>'s Shopping cart</p> 
     <button data-bind="click: checkOut">Checkout</button> 
     <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> 

        <!--below binding is breaking the script--> 

        <td><button data-bind="click: $root.removeProduct">Remove</button></td> 
       </tr> 
      </tbody> 
     </table> 
     <button data-bind="click: addProduct">Add Item</button> 
    </body> 

<!-- end snippet -->

來源

2015-03-02 satyanshu

你缺少語句中的'new'的：'ko.applyBindings（personViewModel）;'應該是'ko.applyBindings （new personViewModel）;' – nemesv 2015-03-02 14:01:43

@nemesv如果我評論removeProduct函數和$ root.removeProduct綁定，我可以添加產品到我的購物車。我試過ko.applyBindings（new personViewModel）;只有我得到的是我在視圖上的整個產品列表，但我無法添加和刪除產品，並且更改後的錯誤是「Uncaught TypeError：無法讀取屬性'刪除'未定義的」。 – satyanshu 2015-03-02 14:10:16

你的代碼相當混亂：你不會一直使用'this'和'self'，並且你從幾個導致全局定義對象的地方錯過了它們。這裏有一個固定版本：http：// jsfiddle。 net/y7wrjywn/ – nemesv 2015-03-02 14:23:11

這裏的錯誤是露水的功能和可觀測數組的範圍。

綁定無法找到相應的視圖模型對象。

下面是對此的兩種解決方案。請剔除這些小提琴。

jsfiddle.net/y7wrjywn其中可觀察數組是在視圖模型定義中進行的。

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script> 
<body> 
    <h1>Hello, Knockout.js</h1> 

    <p><span data-bind='text: fullName'></span>'s Shopping cart</p> 
    <button data-bind="click: checkOut">Checkout</button> 
    <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> 
       <!--below binding is breaking the script--> 
       <td> 
        <button data-bind="click: $root.removeProduct">Remove</button> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
    <button data-bind="click: addProduct">Add Item</button> 
</body> 

//the script 

     function Product(name, price) { 

      this.name = ko.observable(name); 
      this.price = ko.observable(price); 

     }; 

     function personViewModel() { 
      var self = this; 

      self.firstName = ko.observable("John"); 
      self.lastName = ko.observable("Smith"); 
      self.checkOut = function() { 
       alert("Trying to Checkout"); 
      }; 

      self.fullName = ko.computed(function() { 
       return self.firstName() + " " + self.lastName(); 
      }) 

      self.addProduct = function() { 

       self.shoppingCart.push(new Product("Yogurt", 10.99)); 

      }; 

      self.shoppingCart = ko.observableArray([ 

      new Product("milk", 10.99), 
      new Product("bread", 7.99), 
      new Product("Jam", 1.39) 

      ]); 


      //this method is bind with the button and producing error 
      self.removeProduct = function (product) { 
       self.shoppingCart.remove(product) 
      }; 

     }; 

     ko.applyBindings(new personViewModel);

http://jsfiddle.net/satyanshua/eawd9y06/1/其中功能取出視圖模型

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script> 
<body> 
    <h1>Hello, Knockout.js</h1> 

    <p><span data-bind='text: fullName'></span>'s Shopping cart</p> 
    <button data-bind="click: checkOut">Checkout</button> 
    <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> 
       <td> 
        <button data-bind="click: removeProduct">Remove</button> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
    <button data-bind="click: addProduct">Add Item</button> 
</body> 


function Product(name, price) { 

    this.name = ko.observable(name); 
    this.price = ko.observable(price); 

} 

shoppingCart = ko.observableArray([ 

new Product("milk", 10.99), 
new Product("bread", 7.99), 
new Product("Jam", 1.39) 

]); 

addProduct = function() { 

    shoppingCart.push(new Product("Yogurt", 10.99)); 

}; 

self.removeProduct = function (product) { 
    shoppingCart.remove(product); 
}; 


function personViewModel() { 
    var self = this; 

    firstName = ko.observable("John"); 
    lastName = ko.observable("Smith"); 
    checkOut = function() { 
     alert("Trying to Checkout"); 
    }; 

    fullName = ko.computed(function() { 
     return firstName() + " " + lastName(); 
    }); 


} 
ko.applyBindings(new personViewModel());

來源

2015-03-02 15:19:27 satyanshu

無法處理綁定foreach與無法讀取屬性

回答

相關問題