淘汰 foreach 生成 html 个字段

Question

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

也许您知道如何在 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]、[=17= 的输入], quantityArray[2]

你能帮我或给点建议吗？

Answer 1

如果我答对了你的问题，大约 14 分钟就可以了。我还向 Quantity 添加了 observable 以向您展示如何扩展具有绑定属性的示例。

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>

淘汰 foreach 生成 html 个字段

Knockout foreach generate html fields

html

knockout.js