淘汰赛 - 不能多次将绑定应用于同一个元素

Question

我需要用来自两个来源的数据填充我的行程表：来自服务器在页面加载时使用 GET（以获取用户的存档行程）和来自可观察值（当用户添加新行程时）。我可以以某种方式合并这两个脚本，以便它们只应用一次绑定吗？现在我收到一个错误：您不能将绑定多次应用于同一个元素

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

Answer 1

提供相关元素的 ID，然后将模型仅应用于那些 DOM 元素。例如，

HTML：

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

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

还有绑定：

ko.applyBindings(model, document.getElementById("add-trip"));

ko.applyBindings(new tripModel(), document.getElementById("your-trips"));

JSFiddle 示例：

https://jsfiddle.net/hellobrett/49xaqj46/1/

JSFiddle 示例走向另一个方向：

https://jsfiddle.net/hellobrett/49xaqj46/2/

参考：

http://knockoutjs.com/documentation/observables.html

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

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

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