Question

我似乎在与richsilv：owl-carousel和MongoDB集合一起使用Meteor 1.0.3.2时遇到了一些麻烦。

我将列出下面的代码，但结果是当在richsilv：owl-carousel div中使用{{#each}}时，间接数量的项目将出现在外部，特别是在轮播之前。我提到竞争条件，因为外部项目的数量会因刷新而有所不同。

轮播模板如下所示：

<template name="someStuffCarousel">
  <div class="owl-carousel">
   {{> theStuff}}
  </div>
</template>

theStuff模板是：

<template name="theStuff">
{{#each something}}
  <div id="accordion" role="tablist" aria-multiselectable="true" class="panel-group" style="margin-bottom: 1cm; width: 33%; margin-left: auto; margin-right: auto;">
    <div class="panel panel-default">
      <div id="headingOne" role="tab" class="panel-heading">
        <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">{{title}}</a>
        </h4>
      </div>
      <div id="collapseOne" role="tabpanel" aria-labelledby="headingOne" class="panel-collapse collapse">
        <div class="panel-body">{{description}}</div>
      </div>
    </div>
  </div>
{{/each}}
</template>

carousel coffeescript文件是（该集合已在其他地方声明并发布，并且已禁用autopublish）：

somethingSubscribe = Meteor.subscribe('somethingPublish')

Template.someStuffCarousel.rendered = ->
    Tracker.autorun(((computation) ->               
            if somethingSubscribe.ready()
                    $(".owl-carousel").owlCarousel()
                    computation.stop()
            ).bind(this))

上面未列出的是'某事'助手。来自集合的数据正在传播到客户端，但是有些渲染仍然发生在旋转木马div之外，大概是在'somethingSubscribe.ready（）'触发之前。

总的来说，我认为我看到了一个竞争条件，'theStuff'模板{{#each}}迭代在订阅'ready'事件之前部分触发。我的理解是使用'ready'事件将确保不会发生。

我似乎错过了一些东西。

谢谢！

Answer 1

我只想出这个。

基本问题是由于在模板中使用{{#each}}块而不是仅通过其api填充轮播。这导致竞争条件导致间歇性数量的＆＃34; theStuff＆＃34;被转移到旋转木马外面。

新的轮播模板如下所示：

<template name="someStuffCarousel">

 <div class="owl-carousel">

 </div>

</template>

因此新材料模板是：

<template name="theStuff">
  <div id="accordion" role="tablist" aria-multiselectable="true"      class="panel-group" style="margin-bottom: 1cm; width: 33%; margin-left:  auto; margin-right: auto;">
  <div class="panel panel-default">
     <div id="headingOne" role="tab" class="panel-heading">
    <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">{{title}}</a>
    </h4>
     </div>
     <div id="collapseOne" role="tabpanel" aria-labelledby="headingOne"  class="panel-collapse collapse">
        <div class="panel-body">{{description}}</div>
     </div>
    </div>
  </div>
</template>

最后，程序化渲染coffeescript是：

somethingSubscribe = Meteor.subscribe('somethingPublish')

Template.someStuffCarousel.rendered = ->

    $(".owl-carousel").owlCarousel()

    Tracker.autorun(((computation) ->

            if somethingSubscribe.ready()
                    $(".owl-carousel").owlCarousel()

                    somethings = getSomethings()    // just a standard 'get data' function

                    somethings.forEach((something) ->

                            $(".owl-carousel").data("owl-carousel").addItem(Blaze.toHTMLWithData(Template.theStuff, something))
                    )
            ).bind(this))

Meteor：Race Condition Trouble使用richsilv：owl-carousel和Template {{#each}}内容

1 个答案: