I am using knockoutjs and isotope masonary layout, with the custom binding based on the code blog link here and shown below:
View:
<div id="container" class="isotope" data-bind="foreach: bills">
<div class="item" data-bind="isotope: {container: '#container', itemSelector: '.item'}, style: {height: RandomHeight() + 'px'}">
<h3 data-bind="text: title"></h3>
<p>Votes: <span data-bind="text: votes"></span><p>
<p data-bind="text: desc"></p>
</div>
</div>
And ViewModel and custom binding:
ko.bindingHandlers.isotope = function() {
var self = this;
self.init = function(element, valueAccessor, allBindings, viewModel, bindingContext) {
console.log("init...");
var value = ko.utils.unwrapObservable(valueAccessor());
var $container = $(value.container);
$container.isotope({
itemSelector: value.itemSelector,
masonry: {
columnWidth: 100
}
});
};
self.update = function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var $el = $(element);
var value = ko.utils.unwrapObservable(valueAccessor());
console.log("updating..." + value);
var $container = $(value.container);
$container.isotope('appended', $el);
};
return {
init: self.init,
update: self.update
}
}();
The issue is when I add a new item and append it to the list, the first item jumps from left to right.
Any ideas what I am doing wrong please?
Fiddle is here: http://jsfiddle.net/g18c/zoohcveh/4/