淘汰foreach生成html字段答案

【问题标题】：Knockout foreach generate html fields淘汰foreach生成html字段
【发布时间】：2019-12-20 14:50:14
【问题描述】：

我想根据用户的需要显示尽可能多的字段。

也许您知道如何在 Knockout 框架中使用 foreach 循环来处理这种情况。

例如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 个标签和输入，ID 为 quantity1、quantity2、quantity3 和值：quantityArray[0]、quantityArray[1]、quantityArray[2]

你能帮我或给点建议吗？

【问题讨论】：

标签： html knockout.js

【解决方案1】：

如果我的问题是正确的，这应该是大约。我还在 Quantity 中添加了可观察的内容，以向您展示如何使用绑定属性扩展示例。

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>

【讨论】：