代码之家  ›  专栏  ›  技术社区  ›  Ebenizer Pinedo

流星同位素不适用于嵌套模板

  •  0
  • Ebenizer Pinedo  · 技术社区  · 7 年前

    家html

    <template name="home">
      <div class="grid">
        {{> card }}
      </div>
    </template>
    

    import './home.html';
    
    Template.home.onRendered ( function() {
    
          $('.grid').isotope({
            // options
            itemSelector: '.grid-item',
            layoutMode: 'masonry',
            masonry: {
              gutter: 24
            }
          });
     });
    

    卡片html

    <template name="card">
    
      {{#each publications}}
        <div class="grid-item">
          <div class="card-margin">
            <img src="{{avatar}}" alt="" class="avatar"/>
            <div class="name"> {{username}} <div class="dropdown"><a>></a><div class="dropdown-content">{{#if isOwner}}<button class="delete">&times;</button> <button class="edit">Edit</button>{{else}}<button>Report</button> <button>Unfollow</button>{{/if}}</div></div></div>
            <div class="date" id="date-show">{{customDate}} </div>
            <p class="card">
                {{ pub }}
            </p>
          </div>
        </div>
      {{/each}}
    </template>
    

    1 回复  |  直到 7 年前
        1
  •  0
  •   Styx    7 年前

    问题是你的 home 呈现模板 其嵌套模板。因此,没有任何 .grid-item 元素。

    .isotope(...) 使用 Meteor.defer() Meteor.setTimeout() 希望这能给嵌套模板足够的时间来渲染:

    Template.home.onRendered(function() {
      Meteor.setTimeout(function() {
        $('.grid').isotope({
          // options
        });
      }, 250);
    

    补充

    另一个选项是嵌套模板从其 onRendered 功能:

    Main template

    Template.home.onCreated(function() {
      this.renderGrid = _.debounce(() => {
        $('.grid').isotope({
          // options
        });
      }, 250);
    });
    
    Template.home.events({
      'ready.griditem .grid'(e, tpl) {
        tpl.renderGrid();
      }
    });
    

    Nested template :

    Template.card.onRendered(function() {
      $('.grid').trigger('ready.griditem');
    });