淘汰赛 - 不能绑定多次到相同的元素

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

In case you’re wondering what the parameters to ko.applyBindings do,

• The first parameter says what view model object you want to use with the declarative bindings it activates

• Optionally, you can pass a second parameter to define which part of the document you want to search for data-bind attributes. For example, ko.applyBindings(myViewModel, document.getElementById('someElementId')). This restricts the activation to the element with ID someElementId and its descendants, which is useful if you want to have multiple view models and associate each with a different region of the page.