Нокаут: передайте значение от контроллера для просмотра, а затем передайте его из вида в режим просмотра

Question

Я новичок в Knockout. В основном мне нужно получить массив элементов (пары цены и количества) от контроллера, а затем отобразить его на моем представлении. Но перед тем, как я его покажу, я хочу использовать нокаут для вычисления (подсчета промежуточного итога) в модели viewmodel, а затем передать новый массив в представление. Я знаю, что могу привязать исходный массив к моему представлению. Но как я могу передать этот массив в мою модель просмотра?

Answer 1

Вы не переходите с точки зрения в режим просмотра, это наоборот. Контроллер передает данные в режим просмотра, привязанный к представлению. Я отвлекся.

Существует несколько различных методов, но общий - это отображение данных в наблюдаемые значения. Нокаут имеет вспомогательный метод 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>