Компонент Canjs Tempate DOM Live привязки

Мой код состоит в том, чтобы реализовать страницу разбивки на страницы, как в этом примере, https://github.com/bitovi/canjs/blob/master/component/examples/paginate.html.

Я обнаружил, что {#messages}...{/messages} в шаблоне message.mustache не был вставлен на страницу, в то время как событие вставки компонента списка сообщений было запущено, поэтому я не могу сделать какую-либо привязку к dom {#messages} в событие, потому что он не существует на странице.

Есть ли другие способы решить эту проблему?

Шаблоны:

message_list.mustache:

<app>
<messagelist deferredData='messagesDeferred'></messagelist>
<next-prev paginate='paginate'></next-prev>
<page-count page='paginate.page' count='paginate.pageCount'></page-count>
</app>

message.mustache:

{#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)
});
Источник

1 ответ

Я решил проблему, но не в лучшем случае, может быть, у кого-то есть способ получше.

  • Я изменил свой шаблон, добавить новый компонент под названием <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.mustache:

<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>

message.mustache:

<dl class="am-accordion-item" >
...
</dl>
Источник
Другие вопросы по тегам