淘汰賽 - 不能綁定多次到相同的元素

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.