我的代码是实现像此示例这样的分页页面,https://github.com/bitovi/canjs/blob/master/component/examples/paginate.html .
我找到了 {#messages}...message.mustache 模板中的 {/messages} 未插入到页面中,而 messagelist 组件插入事件已被触发,因此我无法在事件中对 {#messages} dom 进行任何绑定,因为它'不存在于页面中。
还有其他方法可以解决此问题吗?
模板:
message_list.小胡子:
<app>
<messagelist deferredData='messagesDeferred'></messagelist>
<next-prev paginate='paginate'></next-prev>
<page-count page='paginate.page' count='paginate.pageCount'></page-count>
</app>
留言.胡子:
{#messages}}
<dl>
<dt>.....</dt>
<dd>....</dd>
</dl>
{/messages}
组件:
can.Component.extend({
tag: "messagelist",
template: can.view('/static/web/tpl/mobile/message.mustache'), // to load message template
scope: {
messages: [],
waiting: true,
},
events: {
init: function () {
this.update();
},
"{scope} deferreddata": "update",
update: function () {
var deferred = this.scope.attr('deferreddata'),
scope = this.scope,
el = this.element;
if (can.isDeferred(deferred)) {
this.scope.attr("waiting", true);
deferred.then(function (messages) {
scope.attr('messages').replace(messages);
});
} else {
scope.attr('messages').attr(deferred, true);
}
},
"{messages} change": function () {
this.scope.attr("waiting", false);
},
inserted: function(){
// can't operate the dom in message.mustache template
}
}
});
//to load component template
can.view("/static/web/tpl/mobile/message_list.mustache",{}, function(content){
$("#message-list").html(content)
});
我已经解决了问题,但不是最好的,也许有人有更好的方法。
- 我更改了模板,添加了一个名为
<messageitem>
的新组件 -
<messageitem>
将加载另一个模板:message.mustache - 每个
<messageitem>
在插入<messagelist>
时都会触发插入的事件
新组件:
can.Component.extend({
tag: "messageitem",
template:can.view('/static/web/tpl/mobile/message.mustache'),
events: {
inserted: function(el, ev){
// Can-click can not satisfy my needs,
// because i call the third-party module to bind click event
// this module will be called repeatedly, not the best way
reloadModules(['accordion']);
}
}
});
// To load message_list.mustache
can.view("/static/web/tpl/mobile/message_list.mustache",{}, function(content){
$("#message-list").html(content)});
静态 html:
<body>
<div id="message-list">
....
</div>
</body>
message_list.小胡子:
<app>
<messagelist deferredData='messagesDeferred'>
{{#messages}}
<messageitem></messageitem>
{{/messages}}
</messagelist>
<next-prev paginate='paginate'></next-prev>
<page-count page='paginate.page' count='paginate.pageCount'></page-count>
</app>
留言.胡子:
<dl class="am-accordion-item" >
...
</dl>