挖空.js单击按钮后使用数据创建新记录

knockout.js create new record with data after clicking a button

本文关键字：数据 创建 新记录 js 单击 按钮 挖空      更新时间：2023-09-26

我想填写两个输入字段，然后单击按钮"提交"它们，并将它们显示在新创建的表格行中。敲除有可能这样的事情吗？如果是这样，我该如何实现它？

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<a class="btn btn-primary btn-lg"  role="button"  >Add</a>
<div class="panel panel-default">
    <div class=panel-heading>Your data</div>
    <table class=table>
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

使用可观察数组作为绑定http://knockoutjs.com/documentation/observableArrays.html

向链接添加数据绑定

<a class="btn btn-primary btn-lg"  role="button" data-bind="click: add()" >Add</a>

假设已将视图模型定义为 vm，请执行以下操作：

将可观察数组添加到视图模型

vm.myarray = ko.observableArray();

向视图模型添加函数

vm.add = function() {
    vm.myarray.push({firstName: firstName, lastName: lastName };
}

向表行添加绑定

<tr data-bind="foreach: myarray">
    <th data-bind="text: firstName"></th>
    <th data-bind="text: lastName"></th>
</tr>

你可能想要的是一个可观察的数组。它的工作方式与您拥有的其他可观察量一样，但可以包含许多对象。

将其与foreach绑定相结合，您就有了填写表格的配方。

var AppViewModel = function() {
  this.firstName = ko.observable();
  this.lastName = ko.observable();
  this.records = ko.observableArray();
};
var model = new AppViewModel();
$('.btn').click(function() {
  // Create a record on click
  model.records.push({ 
    firstName: model.firstName(),
    lastName: model.lastName()
  });
});
ko.applyBindings(model);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<a class="btn btn-primary btn-lg"  role="button"  >Add</a>
<div class="panel panel-default">
    <div class=panel-heading>Your data</div>
    <table class=table>
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: records">
          <tr>
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
          </tr>
        </tbody>
    </table>
</div>

如果不使用 jQuery，则可以使用普通事件侦听器设置单击绑定。

document.querySelector('.btn').addEventListener('click', function() {
  model.records.push({
    firstName: model.firstName(),
    lastName: model.lastName()
  });
});

更好的是，您可以使用Denis Pitcher所说的，并为模型提供一种使用data-bind="click: add()"应用的方法。

相关文章：