Javascript 敲除-不能对同一元素多次应用绑定

我需要用两个来源的数据填充trip表：当页面加载时使用GET的服务器数据（用于拥有用户的存档trip）和可观察值数据（当用户添加新trip时）。我是否可以合并这两个脚本，使它们只应用一次绑定？现在我遇到一个错误：不能对同一个元素多次应用绑定

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Add a trip</h3>
  </div>
  <div class="panel-body">
    <div class="form-group">
        <label for="from">From</label> 
        <input type="text" class="form-control" id="from" name="from" placeholder="From" data-bind="value: from">
    </div>
    <div class="form-group">
        <label for="to">To</label> 
        <input type="text" class="form-control" id="to" name="to" placeholder="To" data-bind="value: to">
    </div>
    <a class="btn btn-primary btn-lg"  role="button" data-bind="click: add()" >Add</a>
  </div>
</div>


<div class="panel panel-default">
    <div class=panel-heading>Your trips</div>
    <table class=table>
        <thead>
            <tr>
                <th>From</th>
                <th>To</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: records">
            <tr>
                <td data-bind="text: from"></td>
                <td data-bind="text: to"></td>
            </tr>
        </tbody>
    </table>
</div>


<script type="text/javascript" src="js/knockout-3.4.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<script type="text/javascript">
var AppViewModel = function() {
  this.from = ko.observable();
  this.to = ko.observable();
  this.records = ko.observableArray();

};
var model = new AppViewModel();


model.add = function() {
    model.records.push({ 
    from: model.from(),
    to: model.to()
  });


//sending data to server
   var data = 
            {
                from : this.from(), to : this.to(), date : this.date(),  price : this.price(), freeSeats : this.freeSeats()           
            }
            alert(data);

        $.post("/data", data, function(response)
        {

        })

}

ko.applyBindings(model);

</script>

<script>
    function tripModel() {
        this.records = ko.observableArray([]);

        $.getJSON("/usersTrips", function(data) {

          self.records(data);

        })
    }
    ko.applyBindings(new tripModel());
</script>

增加一次旅行
从…起
到
添加
你的旅行
从…起
到
var AppViewModel=函数（）{
this.from=ko.observable（）；
this.to=ko.observable（）；
this.records=ko.observableArray（）；
};
var模型=新的AppViewModel（）；
model.add=函数（）{
model.records.push（{
from:model.from（），
to:model.to（）
});
//向服务器发送数据
风险值数据=
{
from:this.from（），to:this.to（），date:this.date（），price:this.price（），freesets:this.freesets（）
}
警报（数据）；
$.post（“/data”、数据、函数（响应）
{
})
}
ko.应用绑定（模型）；
函数模型（）{
this.records=ko.observearray（[]）；
$.getJSON（“/usersTrips”，函数（数据）{
自我记录（数据）；
})
}
应用绑定（新tripModel（））；

给出相关元素ID，然后将模型仅应用于那些DOM元素。比如说,

Html:

<div id="add-trip" class="panel panel-default">

<div id="your-trips" class="panel panel-default">

JSFiddle示例：

<div id="add-trip" class="panel panel-default">

<div id="your-trips" class="panel panel-default">

jshiddle示例走向另一个方向：

<div id="add-trip" class="panel panel-default">

<div id="your-trips" class="panel panel-default">

参考资料：

<div id="add-trip" class="panel panel-default">

<div id="your-trips" class="panel panel-default">

如果您想知道ko.applyBindings的参数是什么

• 第一个参数表示要将哪个视图模型对象与它激活的声明性绑定一起使用

• （可选）可以传递第二个参数，以定义要搜索文档的哪部分数据绑定属性。例如，ko.applyBindings（myViewModel，document.getElementById（'someElementId'））。这将激活限制为ID为someElementId的元素及其子体，如果希望有多个视图模型并将每个视图模型与页面的不同区域关联，这将非常有用

---

我想我不明白。如果我想为同一个元素应用模型，它会起作用吗？我有一个表，我想从两个源绑定到这个表。那么如何将它划分为这两个'div'元素呢？您的代码有一些问题。请参阅我的答案中的JSFIDLE示例。基本思想是您可以在脚本中引用这两个模型，但是您只能将每个模型应用于任何给定的DOM元素一次。但我想将输入数据添加到表中。现在看来情况正好相反，对吧？如何将输入绑定到表？好的，下面是一个相反的示例；）您的

单击

绑定应该是一个函数，而不是函数调用。