我的樣本購物車無法正常工作

Question

我正在學習knockout.js。 因此，我嘗試構建一個樣本購物車，最初會在其中附帶產品數據。 當用戶選擇任何產品時，將在正確的輸入控件中填寫相應的價格和數量，並通過計算的屬性自動計算小計。

最初，當我運行程序時，將顯示一個購物車的數據，但是當我選擇任何產品時，價格和數量值都不會被填滿，也沒有小計。 我是KO的新手，那為什么為什么我犯了一個愚蠢的錯誤，而這個錯誤卻在我眼前變得不明顯。 所以，請指導我哪里出錯了。

這是我的完整代碼

 <table id="table1" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <th style="width:150px">Product</th>
        <th>Price ($)</th>
        <th>Quantity</th>
        <th>Amount ($)</th>
    </tr>

    <tbody data-bind='template: {name: "orderTemplate", foreach: lines}'></tbody>
</table>

<script type="text/html" id="orderTemplate">
    <tr>
        <td><select data-bind="options: products, 
                               optionsText: 'name', 
                               value: id,
                               optionsCaption:'--Select--'">,
                               value: $parent.product
                               </select>
        </td>
        <td><span data-bind="value: price" /></td>
        <td><input data-bind="value: quantity" /></td>
        <td><span data-bind="value: subtotal" /></td>
    </tr>
</script>

<script type="text/javascript">
    var _products = [
      {
          "name": "1948 Porsche 356-A Roadster",
          "price": 53.9
          , quantity: 1
      },
      {
          "name": "1948 Porsche Type 356 Roadster",
          "price": 62.16
          , quantity: 1
      },
      {
          "name": "1949 Jaguar XK 120",
          "price": 47.25
          , quantity: 1
      },
      {
          "name": "1952 Alpine Renault 1300",
          "price": 98.58
          , quantity: 1
      },
      {
          "name": "1952 Citroen-15CV",
          "price": 72.82
          , quantity: 1
      },
      {
          "name": "1956 Porsche 356A Coupe",
          "price": 98.3
          , quantity: 1
      },
      {
          "name": "1957 Corvette Convertible",
          "price": 69.93
          , quantity: 1
      }];

    function formatCurrency(value) {
        return "$" + value.toFixed(2);
    }

    var CartLine = function () {
        var self = this;
        self.products = ko.observableArray(_products);
        self.product = ko.observable();
        self.quantity = ko.observable(1);
        self.price = ko.observable(1);
        self.subtotal = ko.computed(function () {
            return self.product() ? self.product().price * parseInt("0" + self.quantity(), 10) : 0;
        });

    };

    var Cart = function () {
        // Stores an array of lines, and from these, can work out the grandTotal
        var self = this;
        self.lines = ko.observableArray([new CartLine()]); // Put one line in by default
    };

    ko.applyBindings(new Cart());    
</script>

Answer 1

所以這里有一些問題。 首先，您對下拉列表的綁定格式不正確

<select data-bind="options: products, 
                           optionsText: 'name', 
                           value: id,
                           optionsCaption:'--Select--'">,
                           value: $parent.product
                           </select>

值字段在數據綁定內聲明為屬性“ id”，而在視圖模型中看不到該屬性。 外部的值綁定（'value：$ parent.product'）綁定到有效的屬性，但不在數據綁定內。 它看起來應該像這樣：

<select data-bind="options: products, 
                           optionsText: 'name',
                            value: product">
                           </select>

注意：我刪除了optionsCaption，因為它只會用optionsCaption中的字符串覆蓋您的“產品”對象（名稱，價格和數量的對象）。 這會弄亂以后依賴“產品”對象屬性的所有綁定。

至於您希望顯示的其他字段：

    <td><span data-bind="value: price" /></td>
    <td><input data-bind="value: quantity" /></td>
    <td><span data-bind="value: subtotal" /></td>

這些當前綁定到viewModel屬性的價格，數量和小計。 它們都沒有變化（並且跨度應綁定到“文本”而不​​是“值”）。 因此，我們需要將這些字段綁定到通過下拉菜單設置的對象，如下所示：

    <td><span data-bind="text: product().price" /></td>
    <td><input data-bind="value: product().quantity" /></td>
    <td><span data-bind="text: product().total" /></td>

這將顯示“價格”和“數量”的正確值。 但是，這些值不是可觀察的，並且更改時不會更新任何計算結果。 因此，我們需要觀察這些屬性，以便通過在數量字段中鍵入並查看總更新來獲得完整的響應感。 我更喜歡創建JS對象來保存這些可觀察屬性的集合：

function Product(data){
data = data || {};
var self = this;
self.name = ko.observable(data.name || "");
self.price = ko.observable(data.price || "0");
self.quantity = ko.observable(data.quantity || "0");
self.total = ko.computed(function(){
    return self.price() * self.quantity();
});
}

為了保持一致性，我也將合計函數移到了該對象中。
要使用此功能，您可以通過傳入具有適當屬性的對象來調用它，也可以不進行任何調用而將其初始化為

{name: "", price: "0", quantity: "0"}.

這也意味着我們必須更改您的產品列表才能使用此新對象，否則該列表中的任何內容都不會具有可觀察的屬性。 您可以將'new Product（）'包裝在使用的現有JS對象周圍：

var _products = [
  new Product({
      "name": "1948 Porsche 356-A Roadster",
      "price": 53.9
      , quantity: 1
  }),
  new Product({
      "name": "1948 Porsche Type 356 Roadster",
      "price": 62.16
      , quantity: 1
  }),
  new Product({
      "name": "1949 Jaguar XK 120",
      "price": 47.25
      , quantity: 1
  }),
  new Product({
      "name": "1952 Alpine Renault 1300",
      "price": 98.58
      , quantity: 1
  }),
  new Product({
      "name": "1952 Citroen-15CV",
      "price": 72.82
      , quantity: 1
  }),
  new Product({
      "name": "1956 Porsche 356A Coupe",
      "price": 98.3
      , quantity: 1
  }),
  new Product({
      "name": "1957 Corvette Convertible",
      "price": 69.93
      , quantity: 1
  })];

您可以看到我在此提琴中提到的所有更改的全部內容： http : //jsfiddle.net/7e0vujf5/11/