KO Computed field not working

我正在購物車（http://beta.jcantiques.com/Home/Cart）您需要從產品頁面添加項目。KO Computed field not working

我無法獲得SUM CBM字段的工作。

這裏是代碼：

JS

<script> 
    $(document).ready(function() { 
    var CartLine = function() { 
      var self = this; 
      self.UniqueItemCode = ko.observable(); 
      self.ItemCode = ko.observable(); 
      self.Description = ko.observable(); 
      self.SizeInCm = ko.observable(); 
      self.CmCBM = ko.observable(); 
      self.Wood = ko.observable(); 
      self.Quantity = ko.observable(); 
      self.subtotalCBM = ko.computed(function() { 
       return (parseFloat(self.CmCBM) * parseFloat(self.Quantity)); 
      }); 
     }; 

     var Cart = function() { 
      var self = this; 
      self.lines = ko.mapping.fromJS([]); 
      //Converting C# data into JS array 
      var orderItems = JSON.parse('@Html.Raw(Json.Encode(Model))'); 
      console.log(orderItems); 

      // Mapping JS array to KO array 
      ko.mapping.fromJS(orderItems, {}, self.lines); 

      self.grandTotalCBM = ko.computed(function() { 
       var total = 0; 
       $.each(self.lines(), function() { total += this.subtotalCBM(); }) 
       return total; 
      }); 

      self.totalQty = ko.computed(function() { 
       var total = 0; 
       $.each(self.lines(), function() { total += parseInt(this.Quantity()) }) 
       return total; 
      }); 

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

HTML

<tbody data-bind="foreach: lines"> 
          <tr> 
           <td><a href="#" class="icon-close remove-item" data-bind="click: $parent.removeLine"><span aria-hidden="true" class="icon_close"></span></a></td> 
           <td> 
            <img style="width:70px; height:70px;" onerror="if (this.src != '/Content/Images/no_picture.gif') this.src = '/Content/Images/no_picture.gif';" data-bind=" attr: { 'src': '/Content/OPAMS_Images/' + ItemCode + '/' + ItemCode + '-Thumb.jpg' }" /> 
           </td> 
           <td> 
            <span data-bind="text: ItemCode"></span> 
           </td> 
           <td> 
            <span data-bind="text: Description" style="max-width:200px;"></span> 
           </td> 
           <td> 
            <span data-bind="text: SizeInCm"></span> 
           </td> 
           <td> 
            <span data-bind="text: CmCBM"></span> 
           </td> 
           <td> 
            <span data-bind="text: Wood"></span> 
           </td> 
           <td> 
            <input data-bind='value: Quantity, valueUpdate: "afterkeydown"' style="width: 60px;" /> 
            <span class="hidden" data-bind="text: Quantity"></span> 
           </td> 
           <td> 
            <span data-bind="text: subtotalCBM"></span> 
           </td> 
          </tr> 
         </tbody>

任何幫助將不勝感激。

來源

2016-12-15 Ashish Charan

我查看了您的網站，您沒有使用您創建的CartLine模型。 – Adrian

您需要調用可觀察到的，以讀取它的值：

self.subtotalCBM = ko.computed(function() { 
    return (parseFloat(self.CmCBM()) * parseFloat(self.Quantity())); 
});

來源

2016-12-15 13:05:25 haim770

還是一樣。不計算。 –

你不使用你所創建的CartLine模型，其中處理的subtotalCBM計算。

您使用ko.mapping插件，我不知道是否有簡單方式使用在線路CartLine模型吧。但是您可以使用方法ko.mapping自定義對象構造並在其上添加subtotalCBM。

像：

var mapping = { 
    create: function(options) { 
    var vm = ko.mapping.fromJS(options.data); 

    vm.subtotalCBM = ko.computed(function() { 
     return (parseFloat(vm.CmCBM()) * parseFloat(vm.Quantity())); 
    }); 

    return vm; 
    } 
}; 

// Mapping JS array to KO array 
ko.mapping.fromJS(orderItems, mapping, self.lines);

使用「創造」更多信息部分here看看自定義對象的構造。

來源

2016-12-16 01:14:41 Adrian

KO Computed field not working

回答

相關問題