Question

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

Answer 1

您不会从视图传递到视图模型，反之亦然。 Controller将数据传递给视图模型，视图模型绑定到视图。我离题了。

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

Knockout：将值从控制器传递到视图，然后将其从视图传递到viewmodel

1 个答案: