[avalon]data-repeat-rendered循环渲染完毕后的回调函数

时间:2021-01-07 23:07:48

有些时候需要在渲染完毕后,引用其他类似JQ插件的初始化工作。这时候需要使用data-repeat-rendered的回调函数。

应用场景:

在metro-start界面下,需要给每个tile引用click-transform的效果。如果使用avalon的ms-repeat构造出来的tiles,是没有这个效果的。

解决方案:

使用data-repeat-rendered回调函数。

data-repeat-rendered: function(action, offset, length)
//this指向当前DOM元素
//action: 操作,比如'del'
<a ms-attr-href="el.Url" target="_blank" ms-repeat="systems" data-repeat-rendered='subSystemsRendered'>
<div data-click="transform" class="tile bg-darkOrange">
<div class="tile-content icon">
<i class="icon-new-tab-2"></i>
</div>
<div class="brand">
<div class="label">{{el.Name}}</div>
</div>
</div> <!-- end tile -->
</a>

在VM定义中:

var subSystemVm = avalon.define({
$id: "subSystemVm",
hasSubSystem: false,
firstSystem: {},
systems: [],
subSystemsRendered: function() {
$(this).find('[data-click=transform]').tileTransform();
},
...