最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - knockout - cannot apply bindings multiple times to the same element - Stack Overflow

programmeradmin1浏览0评论

I need to fill my trip table with data from two sources: from server using GET when the page loads (to have user's archive trips) and from observable values (when a user adds a new trip). Can I somehow merge those two scripts so that they apply bindings only once? Right now I get an error: You cannot apply bindings multiple times to the same element

<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=".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>

I need to fill my trip table with data from two sources: from server using GET when the page loads (to have user's archive trips) and from observable values (when a user adds a new trip). Can I somehow merge those two scripts so that they apply bindings only once? Right now I get an error: You cannot apply bindings multiple times to the same element

<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./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>
Share Improve this question asked Jan 22, 2016 at 20:40 suuesuue 3542 gold badges6 silver badges18 bronze badges 1
  • Your click binding should be a function, not a function invocation. – Roy J Commented Jan 22, 2016 at 21:10
Add a ment  | 

1 Answer 1

Reset to default 4

Give the relevant elements IDs and then apply the models to only those DOM elements. For example,

Html:

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

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

And the binding:

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

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

JSFiddle Example:

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

JSFiddle example going the other direction:

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

Reference:

http://knockoutjs./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.

发布评论

评论列表(0)

  1. 暂无评论