Rivest issue #305 - unbinding second view affects first
The version contains the patch: #306 and uses view.bind rather than recreating the entire view. In this case, behavior is as expected.
by davidcl64
HTML
<script src="https://rawgit.com/mikeric/rivets/v0.6.8/dist/rivets.js"></script>
<div id="template" style="display: none;">
<li rv-each-item="items">
<input type="checkbox" rv-checked="item.inCart" rv-on-click="controller.updateCart">{item.name}</input>
</li>
</div>
<div id="shop">
<p>All Items</p>
<div class="items"></div>
</div>
<div id="cart">
<p>Cart</p>
<div class="cart"></div>
</div>
<p>The cart starts out hidden, click the button to simulate hide/show. After the first click, the cart will be bound correctly. Checking/Unchecking an item will update both views.</p>
<p>After the second click, simulating a user going back and forth from the items to the cart, the list under <b>All Items</b> no longer receives updates as items in the cart are added/removed.</p>
<button id="hideshow" rv-on-click="controller.simulateShowHideCart">Simulate hide/show Cart</button>
CSS
https://github.com/mikeric/rivets/issues/261#issuecomment-33306878
JavaScript
// The version contains the patch: #306 and uses view.bind rather
// than recreating the entire view. In this case, behavior is as
// expected.
// Monkey patch rebind into each-*
rivets.binders['each-*'] = {
block: true,
bind: function(el) {
var attr, view, _i, _len, _ref1;
if (this.marker == null) {
attr = [this.view.config.prefix, this.type].join('-').replace('--', '-');
this.marker = document.createComment(" rivets: " + this.type + " ");
this.iterated = [];
el.removeAttribute(attr);
el.parentNode.insertBefore(this.marker, el);
el.parentNode.removeChild(el);
} else {
_ref1 = this.iterated;
for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
view = _ref1[_i];
view.bind();
}
}
},
unbind: function(el) {
var view, _i, _len, _ref1, _results;
if (this.iterated != null) {
_ref1 = this.iterated;
_results = [];
for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
view = _ref1[_i];
_results.push(view.unbind());
}
return _results;
}
},
routine: function(el, collection) {
var binding, data, i, index, k, key, model, modelName, options, previous, template, v, view, _i, _j, _k, _len, _len1, _len2, _ref1, _ref2, _ref3, _ref4, _results;
modelName = this.args[0];
collection = collection || [];
if (this.iterated.length > collection.length) {
_ref1 = Array(this.iterated.length - collection.length);
for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
i = _ref1[_i];
view = this.iterated.pop();
view.unbind();
this.marker.parentNode.removeChild(view.els[0]);
}
}
for (index = _j = 0, _len1 = collection.length; _j < _len1; index = ++_j) {
model = collection[index];
data = {
index: index
};
data[modelName] = model;
if...