CanJS - issue #1240

element not rendered with attribute value {{#if}} nested within attribute-encapsulated {{#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>
<script id="data-grid" type="text/stache">
    <table>
        <tr>
            {{#each columns}}
                <th {{#if sorting}}class="sort-{{#if ascending}}ascend{{else}}descend{{/if}}"{{/if}}>
                    this will not render at all
                </th>
            {{/each}}
        </tr>
        <tr>
            {{#each columns}}
                <th class="{{#if sorting}}sort-{{#if ascending}}ascend{{else}}descend{{/if}}{{/if}}">
                    this renders
                </th>
            {{/each}}
        </tr>
    </table>
</script>

CSS

th {
    background-color: silver;
    padding: 0 1em;
}
th.sort-ascend {
    background-color: green;
}
th.sort-descend {
    background-color: orange;
}

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" },
		]
	}
});

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