нокаут - не может применять привязки несколько раз к тому же элементу

Question

Мне нужно заполнить таблицу поездок данными из двух источников: с сервера, используя GET, когда страница загружается (для того, чтобы пользовательский архив отключился) и от наблюдаемых значений (когда пользователь добавляет новую поездку). Могу ли я каким-то образом объединить эти два сценария, чтобы они применяли привязки только один раз? Сейчас я получаю сообщение об ошибке: Вы не можете использовать Bindings несколько раз к одному элементу

<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

Дайте соответствующие элементы идентификаторов, а затем применить модели только те элементы 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.