Question

您好我正在尝试使用Knockout为输入值创建动态表。该表稍后将像数据矩阵一样工作，因此我可以将“产品品牌”的输入值倍增。

这就是现在的情况：

	
        var Group = function(brand,value) {
            this.brand = ko.observable(brand);
        };

      var ViewModel = function(groups) {
            var self = this;
     
        	self.optionValues_brand = ko.observableArray(["Brand1","Brand2","Brand3"]);
            self.selectedBrand = ko.observable();
          
          self.groups = ko.observableArray(ko.utils.arrayMap(groups, function(group) {
                return new Group(group.brand);
            }));

          
          self.addGroup = function() {
          		self.groups.push(new Group(self.selectedBrand()));
          }
      }
      
      var initialGroups = [];
       
        var viewModel = new ViewModel(initialGroups);
        ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Brand:</td>
      <td><select data-bind="options: optionValues_brand, optionsCaption: 'Select One...', value:       selectedBrand"></select></td>

      <td><button data-bind="click: addGroup">Add</button></td>
   </tr>
</table>


<div>
  <table border="1">
    <thead>
      <tr data-bind="foreach: groups">
        <th></th>
        <th data-bind="text: brand"></th>
      </tr>
    </thead>
    <tbody data-bind="foreach: groups">
    <tr>
      <td data-bind="text: brand"></td>
      <td><input type="number" /></td>
    </tr>
    </tbody>
  </table>
</div>

问题是我需要所有列和行都有一个输入字段，但只有一列填充了输入字段。

小提琴：http://jsfiddle.net/ypw79dnv/

如何在所有列和行中插入输入字段？

感谢。

Answer 1

你的输入没有绑定到任何变量，并且你没有为它们绑定任何变量，所以虽然我们可以按照你想要的方式填充表，但我认为它不会有用给你。

你需要制作一个可观察的矩阵。每次添加组时，都会向矩阵添加新行，并在每行的末尾添加新输入。保持直线有点棘手，但您可以交叉引用所有值。

var Group = function(brand, value) {
  this.brand = ko.observable(brand);
};

var ViewModel = function(groups) {
  var self = this;

  self.optionValues_brand = ko.observableArray(["Brand1", "Brand2", "Brand3"]);
  self.selectedBrand = ko.observable();

  self.groups = ko.observableArray(ko.utils.arrayMap(groups, function(group) {
    return new Group(group.brand);
  }));
  self.matrix = ko.observableArray([]);
  self.addGroup = function() {
    // Add new row to matrix
    var newRow = ko.observableArray();
    ko.utils.arrayForEach(self.groups(), function(group) {
      newRow.push(ko.observable());
    });
    self.matrix.push(newRow);
    self.groups.push(new Group(self.selectedBrand()));
    // Add group to each row in matrix
    ko.utils.arrayForEach(self.matrix(), function(row) {
      row.push(ko.observable());
    });
  };
  self.matrix.subscribe(function(newValue) {
    console.debug("Matrix:", newValue.length, newValue[0]().length);
  });
}

var initialGroups = [];

var viewModel = new ViewModel(initialGroups);
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Brand:</td>
    <td>
      <select data-bind="options: optionValues_brand, optionsCaption: 'Select One...', value:       selectedBrand"></select>
    </td>

    <td>
      <button data-bind="click: addGroup">Add</button>
    </td>
  </tr>
</table>


<div>
  <table border="1">
    <thead>
      <tr>
        <th></th>
        <!-- ko foreach: groups -->
        <th data-bind="text: brand"></th>
        <!-- /ko -->
      </tr>
    </thead>
    <tbody data-bind="foreach: groups">
      <tr>
        <td data-bind="text: brand"></td>
        <!-- ko foreach: $parent.matrix()[$index()]() -->
        <td>
          <input type="number" data-bind="value:$data" />
        </td>
        <!-- /ko -->
      </tr>
    </tbody>
  </table>
</div>

使用JavaScript KnockoutJS的动态表

1 个答案: