Rendering Knockout value using jQuery's append

Question

I am trying to render Knockout in jQuery append but it seems that the value fails to render. I need help on rendering the div as shown in the html into the jQuery append container.

var employees = [
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter","lastName": "Jones"}
];

var ViewModel = function() {
  var self = this;
  self.LoadMore = ko.observableArray([]);
  self.OnLoadMoreClick = function() { 
  $.ajax({
    $.each(employees, function(index,value) {
       self.LoadMore.push(value);
    });
  
    $.each(employees, function(index,value) {
       var container = '';
       $('#LoadMoreContainer').append(container);
    });
  });
  }
}

ko.applyBindings(new ViewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div id="LoadMoreContainer">
  <!-- How to move this part into jquery append?
  <!-- ko forEach: LoadMore -->
  <div><div data-bind="firstName"></div><div data-bind="lastName"></div></div>
  <!-- /ko -->
</div>

<div data-bind="click: OnLoadMoreClick">Load More</div>

something like this jsfiddle.net/supercool/LkqTU/26842 . let us know — super cool
– super cool, Commented Sep 23, 2015 at 4:23

Jeroen · Accepted Answer · 2015-09-23 04:31:42Z

Don't do this! Don't append DOM elements yourself.

Knockout is an MVVM framework, which keeps the View (= DOM) in synch with your view models for you. It wants to be in control of the DOM. If you use Knockout, try to use as little jQuery as possible. Avoid it almost completely for any DOM manipulation, except when it is really warrented (e.g. the docs say it's okay).

(Typical exceptions would include, you only manipulate DOM yourself in custom bindings (which are meant explicitly for that), in pre- or post-rendering of foreach bindings, or occasionaly in the event binding.)

But again, if you can help it: don't do this!

Instead, add items to the observableArray, and let Knockout update your view model accordingly:

var employees = [
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter","lastName": "Jones"}
];

var ViewModel = function() {
  var self = this;
  
  self.LoadMore = ko.observableArray([]);
  
  self.OnLoadMoreClick = function() { 
    $.each(employees, function(index, value) {
      self.LoadMore.push(value);
    });
  }
}

ko.applyBindings(new ViewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div id="LoadMoreContainer">
  <!-- ko foreach: LoadMore -->
  <div><span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span></div>
  <!-- /ko -->
</div>

<button data-bind="click: OnLoadMoreClick">Load More</button>

Collectives™ on Stack Overflow

Rendering Knockout value using jQuery's append

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related