Question

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

<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>

Answer 1

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

向您的链接添加数据绑定

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

假设您已将viewmodel定义为vm，请执行以下操作：

在您的视图模型中添加一个oberservable数组

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>

Answer 2

您可能想要的是observable array。它的工作方式与您拥有的其他可观察对象相似，但可以包含许多对象。

将其与foreach绑定相结合，您就可以获得填写表格的方法。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

如果您没有使用jQuery，可以使用普通事件监听器设置点击绑定。

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

甚至比这更好，你可以使用Denis Pitcher所说的内容，并为模型提供一个使用data-bind="click: add()"应用的方法。

单击按钮后，knockout.js会创建包含数据的新记录

2 个答案: