如何使用 foreach 将值设置为数组

Question

如何使用循环向数组添加值。我已经通过硬编码值向数组添加了值，但我需要向数组添加大量数据。所以很难通过硬编码。这部分是我的 JS 代码。

function BModel(checkInOrEdit) {
    "use strict";
    this.Number = ko.observable("");
    this.Years = ko.observableArray(['', '2019', '2018', '2017', '2016', '2015', '2014', '2013', '2012', '2011', '2010', '2009', '2008', '2007', '2006', '2005', '2004', '2003', '2002', '2001', '2000']);
}

BModel.prototype = {

    addTo: function (isSupervised) {
        "use strict";
        this.fname($.trim(this.fname()));
        this.lname($.trim(this.lname()));

    },

    AcDone: function (result, stat) {
        "use strict";
        var validationResults = JSON.parse(result.d);
        var msgTitle = '';
    }
}


$(document).ready(function () {

});

我需要将值添加到 Years 从今年到 1900 年。我该怎么做。目前，我是硬线。

this.Years = ko.observableArray(['', '2019', '2018', '2017', '2016', '2015', '2014', '2013', '2012', '2011', '2010', '2009', '2008', '2007', '2006', '2005', '2004', '2003', '2002', '2001', '2000']);

Answer 1

我建议创建一个帮助器，它首先在常规数组中返回一系列数字。然后，您可以使用帮助程序来初始化您的 observable 数组。

推送到 foreach 中的 observable 数组可能会有多次重绘 DOM 的风险！

这是一个 range 帮助器（可以重构为更简洁）和可观察数组的示例：

function range(from, to) {
  const dir = to > from ? 1 : -1
  return Array.from(
    Array(Math.abs(to - from) + 1),
    (_, i) => from + dir * i
  )
};

const years = ko.observableArray(
  [""].concat(range(new Date().getFullYear(), 1900))
);

ko.applyBindings({ years });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<ul data-bind="foreach: years">
  <li data-bind="text: $data"></li>
</ul>

Answer 2

你可以这样做：

function BModel(checkInOrEdit) {
  "use strict";
  this.Number = ko.observable("");
  this.Years = ko.observableArray();
  let lyears = [];
  for (let i = 1900; i <= new Date().getFullYear(); i++) { 
    lyears.push(i);
  }
  this.Years(lyears); // see comments
}

这不是最优雅的方式，但如果你想使用循环，你会这样做。