Javascript 单击按钮后，knockout.js使用数据创建新记录

我想填写两个输入字段，然后单击按钮“提交”它们，并将它们显示在表的新创建行中。这样的事情在淘汰赛中可能发生吗？如果是的话，我怎样才能做到呢

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

名字：

姓氏：

添加
你的数据
名字
姓

使用可观察数组作为绑定

向链接添加数据绑定

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

向视图模型中添加函数

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>

---

使用可观察数组作为绑定

向链接添加数据绑定

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

向视图模型中添加函数

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>

---

您可能想要的是一个。它的工作原理与您拥有的其他观察对象一样，但可以包含许多对象

把它和装订结合起来，你就有了一个填表的方法

var-AppViewModel=function（）{
this.firstName=ko.observable（）；
this.lastName=ko.observable（）；
this.records=ko.observableArray（）；
};
var模型=新的AppViewModel（）；
$（'.btn'）。单击（函数（）{
//单击即可创建记录
model.records.push（{
firstName:model.firstName（），
lastName:model.lastName（）
});
});
ko.应用绑定（模型）

名字：

姓氏：

添加
你的数据
名字
姓
您可能想要的是一个。它的工作原理与您拥有的其他观察对象一样，但可以包含许多对象

把它和装订结合起来，你就有了一个填表的方法


var-AppViewModel=function（）{
this.firstName=ko.observable（）；
this.lastName=ko.observable（）；
this.records=ko.observableArray（）；
};
var模型=新的AppViewModel（）；
$（'.btn'）。单击（函数（）{
//单击即可创建记录
model.records.push（{
firstName:model.firstName（），
lastName:model.lastName（）
});
});
ko.应用绑定（模型）

名字：

姓氏：

添加
你的数据
名字
姓
在“btn”类上放置jquery click事件不会导致该类的所有元素都触发click事件吗？单击敲除绑定更合适。@DenisPitcher如果没有这里的示例代码，它就足够了。一般来说，我同意使用如您所示的敲除单击事件更合适。您是如何添加代码运行代码段按钮的？我刚开始看到这些，它们太棒了。你肯定在一个更彻底的答案上击败了我：）这就是为什么我从不回答堆栈溢出问题的原因，因为当我一起得到一个像样的答案时，其他人已经击败了我，呵呵。@DenisPitcher哈哈，谢谢！当你在写答案时，看看顶部的按钮，你会发现上面有一张写着
的纸。点击它，你就可以编辑一个可运行的代码段。这太棒了，它们内置了一个提琴器。非常感谢您让我知道，我不确定我是否注意到buttonWouldn在“btn”类上放置jquery click事件不会导致该类的所有元素触发click事件？单击敲除绑定更合适。@DenisPitcher如果没有这里的示例代码，它就足够了。一般来说，我同意使用如您所示的敲除单击事件更合适。您是如何添加代码运行代码段按钮的？我刚开始看到这些，它们太棒了。你肯定在一个更彻底的答案上击败了我：）这就是为什么我从不回答堆栈溢出问题的原因，因为当我一起得到一个像样的答案时，其他人已经击败了我，呵呵。@DenisPitcher哈哈，谢谢！当你在写答案时，看看顶部的按钮，你会发现上面有一张写着
的纸。点击它，你就可以编辑一个可运行的代码段。这太棒了，它们内置了一个提琴器。非常感谢你让我知道，不知道我是否注意到了那个按钮