Why does the html from template dom-if not get applied here

问题

Consider this code:

<div class="container">
    <table class="c">
        <tr>
        <template is="dom-repeat" items="[[days]]" as="o">
            <td class$="[[dayClass(o)]]"><span class="d">[[formatDay(o)]]</span></td>
            <template is="dom-if" if="[[lastDayOfWeek(o)]]"></tr>
                <template is="dom-if" if="[[!lastDayOfCalendar(o)]]"><tr></template>
            </template>
        </template>
        </tr>
    </table>
</div>

Why do the </tr> and <tr> not get applied to the html?

Full JS Bin demo here: https://jsbin.com/dujekefoga/edit?html,output

Edit: Fixed JS Bin url

回答1:

Your table row tags are misplaced, I got closer to your expected result by changing the order in which the tags are placed. Hope this helps you.

https://jsbin.com/quvutugijo/1/edit?html,output

回答2:

At the end, this is what works. And I believe it's the best solution, as it works with two non-nested dom-if, and the html is valid.

I just needed to add a function firstDayOfWeek which returns true if item.isoWeekday() === 1.

    <template is="dom-repeat" items="[[days]]" as="o">
        <template is="dom-if" if="[[firstDayOfWeek(o)]]"><tr></template>
        <td class$="[[dayClass(o)]]"><span class="d">[[formatDay(o)]]</span></td>
        <template is="dom-if" if="[[lastDayOfWeek(o)]]"></tr></template>
    </template>     

来源：https://stackoverflow.com/questions/36703371/why-does-the-html-from-template-dom-if-not-get-applied-here