Question

我想将一个id列表绑定到一个表但是没有这样做：

HTML：

  <table>
    <thead><tr><th>ID</th></tr></thead>
    <tbody data-bind="foreach: records">
      <tr><td data-bind="text: id"></td></tr></tbody>
  </table>
  <button id="help">help</button>

使用Javascript：

function ViewModel(){
  var array = [];
  this.records = ko.observableArray(array);
}

var vm = new ViewModel();
ko.applyBindings(vm);

$("#help").click(function(){
   processClick();
});

function processClick(){
  vm.array([{id: "888888"}]);
}

Answer 1

这是固定代码（点击“运行代码段”以查看其工作原理）

function ViewModel(){
  var self = this;
  self.i = 1;
  this.records = ko.observableArray([]);
  
  this.processClick = function()
  {
    self.records.push({id: self.i++});    
  };
}

var vm = new ViewModel();
ko.applyBindings(vm);

<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <table>
    <thead><tr><th>ID</th></tr></thead>
    <tbody data-bind="foreach: records">
      <tr><td data-bind="text: id"></td></tr></tbody>
  </table>
  <button id="help" data-bind="click: processClick">help</button>
</body>
</html>

你正在使用jQuery将淘汰与DOM操作混合在一起。这是一个错误......如果你想对ViewModel做一个动作，你需要将它定义为ViewModel本身的一个函数。

另一个错误是将数组变量声明为ViewModel的本地变量，然后尝试通过简单的javascript函数访问它。代码中的修复程序是：

function processClick(){
  vm.records.push({id: "888888"});
}

这样你就更新了viewModel记录observableArray，但我强烈建议你将ViewModel与tradicional javascript函数隔离开来。

问候！

使用按钮进行数据绑定

1 个答案: