淘汰赛：将值从控制器传递到视图，然后将其从视图传递到视图模型

Question

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

Answer 1

您不会从视图传递到视图模型，相反。控制器将数据传递给绑定到视图的视图模型。我跑题了。

有几种不同的技术，但一种常见的是将数据映射到可观察值。 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>