我是 knockout 新手。基本上我需要从 Controller 获取一系列项目(价格和数量对),然后将其显示在我的 View 上。但在显示它之前,我想使用 knockout 在 View 模型中进行一些计算(计算小计),然后将新数组传递给 View 。我知道我可以将原始数组绑定(bind)到我的 View 。但我怎样才能把这个数组传递给我的 View 模型呢?
最佳答案
您不会从 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>
关于javascript - knockout : pass a value from controller to view and then pass it from view to viewmodel,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34124924/