Я хочу отобразить столько полей, сколько хочет пользователь.

Может быть, у вас есть идея, как я могу сделать это с помощью цикла foreach в среде Knockout.

Например, numberOfFields - это поле ввода, в котором пользователь может указать, сколько полей он хочет отобразить.

<input id="numberOfFields" type="text" data-bind="value: obj().numberOfFields() />
<div data-bind="foreach: new Array(obj().numberofCashFlows())">
   <label for="quantity$index()">Flow number $index()</label>
   <input id="quantity$index()" type="text" data-bind="value: quantityArray[$index()]" />
</div>

Конечно, код не работает, я хочу сказать вам, что я имею в виду.

Если пользователь вводит 3, я хочу показать 3 метки и входные данные с идентификатором quantity1, quantity2, quantity3 и значениями: quantityArray[0], quantityArray[1], {{X5 } }

Можете ли вы помочь мне или дать совет?

0
clukz 20 Дек 2019 в 17:50

1 ответ

Лучший ответ

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

console.clear();

function Quantity(id, label) {
	var self = this;
  self.id = id;
  self.label = ko.observable(label);
};

ko.applyBindings(() => {
	var self = this;
  self.amount = ko.observable(0);
  self.quantity = ko.observableArray([]);
  
  self.amount.subscribe(function(amount) {
  	var quantity = self.quantity().length;
    amount = Number(amount);
    if (amount > quantity) {
      for (var i = quantity; i < amount; i++) {
      	self.quantity.push(new Quantity(i+1, 'label for ' + (i+1)));
      }
    } else if (amount < quantity) {    	
    	var minus = quantity - amount;
      for (var i = 0; i < minus; i++) {
      	self.quantity.pop();
      }
    }
  });
  
  self.amount(2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<label>amount: </label>
<input type="number" data-bind="textInput: amount" min="0" />
<div data-bind="foreach: quantity">
    <input type="text" data-bind="textInput: label, attr: { placeholder: 'label for ' + id }" /><span data-bind="text: label"></span><br />
</div>
1
Sam 24 Дек 2019 в 14:08