Example from unrender.js:
<tbody>
@helper rows(YourItemType item)
{
<tr ng-repeat-start="item in Model.Items">
<td ng-bind="item.Name" data-unrender="unbind">
@item.Name
</td>
<td ng-bind="item.NumberInStock" data-unrender="unbind">
@item.NumberInStock
</td>
<td ng-bind="item.PricePerEach" data-unrender="unbind">
@item.PricePerEach
</td>
</tr>
<tr ng-repeat-end data-unrender="unloop">
<td colspan="3" ng-bind="item.Description" data-unrender="unbind">
@item.Description
</td>
</tr>
}
@helper empty()
{
<tr ng-if="!Model.Items.length">
<td colspan="3">
Sorry, no items at this time.
</td>
</tr>
}
@*
The 'if' block has been placed first so that
the 'unloop' transformation doesn't wipe out
the <script> from the 'if' block.
*@
@Html.If(!Model.Items.Any(), empty)
@Html.Foreach(Model.Items, rows)
</tbody>
The implementation is kind of quick and naive. When using Foreach
,
if your collection is null or empty, it will create a dummy object for
whatever type you passed in, so make sure all of the expressions in
your template are fail-safe with a dummy object (having automated
tests for your web app wouldn't hurt, either.) Take similar precautions
when referencing your model within an if/else/switch/case block simulated
with If
.