Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/meteor/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Meteor 0.8.0-无法在呈现回调中操作DOM_Meteor - Fatal编程技术网

Meteor 0.8.0-无法在呈现回调中操作DOM

Meteor 0.8.0-无法在呈现回调中操作DOM,meteor,Meteor,在0.8.0之前,下面的代码工作得很好 <template name="carousel"> <!--Here I used the carousel of Bootstrap--> <div id="myCarousel" class="carousel"> <ol class="carousel-indicators"> {{#each counter}} <li d

在0.8.0之前,下面的代码工作得很好

<template name="carousel">
    <!--Here I used the carousel of Bootstrap-->
    <div id="myCarousel" class="carousel">
        <ol class="carousel-indicators">
        {{#each counter}}
            <li data-target="#myCarousel" data-slide-to="{{this}}"></li>
        {{/each}}
        </ol>
        <div class="carousel-inner">
            {{#each carousels}}
                <div class="item"><a href="{{link}}"><img src="{{src}}" ></a></div>
            {{/each}}
        </div>
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</template>

Template.carousel.helpers({
    carousels: function() {
        return Carousels.find();
    },
    counter: function() {
        return _.range(0, Carousels.find().count());
    }
});

Template.carousel.rendered = function() {
    Meteor.defer(function() {
        $('#myCarousel .carousel-indicators li:first').addClass('active');
        $('#myCarousel .item:first').addClass('active');
    });
}
为什么会发生这种情况,有没有更好的解决方案

[更新] 现在我使用一个简单的isFirst助手来实现它。我认为这是一个更好的解决方案

{{#each carousels}}
    <div class="item {{isFirst _id}}"><a href="{{link}}"><img src="{{src}}" ></a></div>
{{/each}}

Template.carousel.isFirst = function(id) {
    return Carousels.find().fetch()[0]._id == id ? 'active' : '';
}
{{#每个旋转木马}
{{/每个}}
Template.carousel.isFirst=函数(id){
返回转盘.find().fetch()[0]。\u id==id?'active':'';
}
至于计数器,我只是让“计数器”从1开始,HTML如下:

<ol class="carousel-indicators">
    <li class="active" data-target="#myCarousel" data-slide-to="0"></li>
    {{#each counter}}
        <li data-target="#myCarousel" data-slide-to="{{this}}"></li>
    {{/each}}
</ol>

  • {{#每个计数器}
  • {{/每个}}
    Template.carousel.rendered在(Meteor的新渲染引擎)中仅运行一次,但在Spark(以前的版本)中它曾多次运行。这种旧的行为之所以有效,是因为它在呈现{{{#each}}块之前和之后运行

    这里的问题是Template.carousel.rendered在呈现{{{each}}块之前运行,因此这些项还不存在

    方法是将{{#each}}的内容放在一个单独的模板中,并点击该模板的呈现事件


    顺便说一下,Meteor.defer不再是必需的。

    听起来像是比赛条件。但我不知道在哪里,用什么。请检查我的答案,一个非常类似的问题。你也可以遵循这个模式。谢谢。它可以工作,但渲染回调将被多次调用。有时可能会导致一些新问题。@Vanitas如果没有节点已经有了“活动”变量,或者在rendered()之外设置一个“is_first_run”变量,并且只有在该变量为false时才运行,那么当该变量运行时,将其设置为true,您就可以快速解决这些问题了……谢谢您的帮助。我刚刚更新了问题以显示我的新解决方案,不再需要呈现回调。再次感谢。你的问题解决了吗?如果是这样,就没有必要在问题中提出答案。只需将其中一个答案标记为已接受即可。:)干杯,是的。我把我的解决方案放在这里有两个原因:1.我最终没有使用你的解决方案;2.帮助有类似问题的人。
    <ol class="carousel-indicators">
        <li class="active" data-target="#myCarousel" data-slide-to="0"></li>
        {{#each counter}}
            <li data-target="#myCarousel" data-slide-to="{{this}}"></li>
        {{/each}}
    </ol>