CanJS - issue #1241

hange to map not rendered in nested {{#if}}

by prometh

HTML

<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://canjs.us/release/latest/can.construct.proxy.js"></script>
<script src="http://canjs.us/release/latest/can.control.plugin.js"></script>
<script src="http://canjs.us/release/latest/can.view.modifiers.js"></script>
<script src="http://canjs.us/release/latest/can.construct.super.js"></script>
<script src="http://canjs.us/release/latest/can.object.js"></script>
<script src="http://canjs.us/release/latest/can.ejs.js"></script>
<script src="http://canjs.us/release/latest/can.map.attributes.js"></script>
<script src="http://canjs.us/release/latest/can.map.backup.js"></script>
<script src="http://canjs.us/release/latest/can.map.delegate.js"></script>
<script src="http://canjs.us/release/latest/can.map.setter.js"></script>
<script src="http://canjs.us/release/latest/can.map.validations.js"></script>
<script src="http://canjs.com/release/latest/can.fixture.js"></script>
<script src="http://canjs.com/release/latest/can.stache.js"></script>
<p>Clicking a column that's already the context of a sort (has <code>class="sort-*"</code>) will not render an update to reflect the change to its ascending/descending state. If another column is clicked, sort will switch and the ascending/descending state will be correct on that column.</p>


<script id="data-grid" type="text/stache">
    <table>
        <tr>
            {{#each columns}}
                <th class="{{#if sorting}}sort-{{#if ascending}}ascend{{else}}descend{{/if}}{{/if}}" can-click="sort">
                    {{name}}
                </th>
            {{/each}}
        </tr>
    </table>
</script>

CSS

p { margin-bottom:1em }
th {
    background-color: silver;
    padding: 0 1em;
}
th.sort-ascend,
th.sort-descend {
    background-color: gray;
}
th.sort-ascend::after {
    content: "▲";
}
th.sort-descend::after {
    content: "▼";
}

JavaScript

can.Component.extend({
	tag: "data-grid",
	template: can.view("data-grid"),
	scope: {
		ascending: true,
		columns: [
			{ sorting:true,  name:"column1" },
			{ sorting:false, name:"column2" },
			{ sorting:false, name:"column3" },
		],
        sort: function(scope, element, event) {
			if ( scope.attr("sorting") ) {
				this.attr("ascending", !this.attr("ascending"));
			} else {
				can.batch.start();
				
				this.attr("columns").forEach( function(column) {
					column.attr("sorting", false);
				});
				
				scope.attr("sorting", true);
				
				can.batch.stop();
			}
		}
	}
});

$(document.body).append( can.stache("<data-grid/>")() );
$(document.body).append( can.mustache("<hr/><data-grid/>")() );