javascript - knockout : pass a value from controller to view and then pass it from view to viewmodel

Question

我是 knockout 新手。基本上我需要从 Controller 获取一系列项目(价格和数量对)，然后将其显示在我的 View 上。但在显示它之前，我想使用 knockout 在 View 模型中进行一些计算(计算小计)，然后将新数组传递给 View 。我知道我可以将原始数组绑定(bind)到我的 View 。但我怎样才能把这个数组传递给我的 View 模型呢？

Answer 1

您不会从 View 传递到 View 模型，反之亦然。 Controller 将数据传递到绑定(bind)到 View 的 View 模型。我离题了。

有多种不同的技术，但常见的一种是将数据映射为可观察的值。 Knockout 有一个辅助方法 arrayMap ，它将帮助将数组中的项转换为可观察值。下面是一个例子:

var Item = function(data) {
  var self = this;
  self.Name = ko.observable(data.Name);
  self.Price = ko.observable(data.Price);
  self.Qty = ko.observable(data.Qty);
  self.Total = ko.pureComputed(function() { return self.Price() * self.Qty();});
  }

var viewModel = function() {
  
  var self =this;
  
  // list of items
  self.Data = ko.observableArray([]);
  
  // simulate ajax call to fetch data
  self.Load = function() {
    var data = [
      { Name: "A", Price: 12.34, Qty: 1},
      { Name: "B", Price: 23.45, Qty: 2 },
      { Name: "C", Price: 1234.56, Qty: 3 }
    ];
    
    var mappedData = ko.utils.arrayMap(data, function(item) {
      return new Item(item);
    });
    
    this.Data(mappedData);
    }
  
  
  }

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul data-bind="foreach: Data">
  <li>
Name: <span data-bind="text: Name"></span>
    Quantity: <input type="text" data-bind="value: Qty" style="width: 100px;" />
    Price: <input type="text" data-bind="value: Price" style="width: 100px;" />
    Total: <span data-bind="text: Total"></span>
  </li>
</ul>
<p>Click the button to simulate a load from API
<button data-bind="click: Load">Load</button></p>