Question

我需要在模板onRendered钩子中获取图像数组，然后在帮助器中获取这些图像以创建滑块。当模态打开时，应创建此滑块。但是当我运行此代码时，帮助程序不会向模板发送任何数据。在console.log中（我可以看到这个数组）。我有这段代码：

Template.slider.onRendered(function() {

    this.autorun(()=> {
        let mainImg = this.data.mainImage || null;
        let imgs = this.data.images || [];

        this.data.imgSet = Images
            .find({_id: { $in: [mainImg, ...imgs] }})
            .map(img => img.url());
    });
});

和帮手：

Template.slider.helpers({
    images() {
        let imgSet = this.imgSet;

        if(imgSet) {
            const slider = $('#vertical').lightSlider({
                gallery: true

            });

            return this.imgSet;
        }

        return [];
    }
});

我的模板文件：

<ul id="vertical" class="light_slider">
   {{#each images}}
          <li data-thumb="{{this}}">
               <img src="{{this}}" style="height:100%"/>
         </li>
   {{/each}}
</ul>

Answer 1

您的助手不依赖于任何反应变量，这就是为什么它只能运行一次，无论您的imgSet变量更新。

要获得你想要的东西，你必须制作反应变量并进行更新。

这样的事情：

Template.slider.onRendered(function() {

    this.imgSet = new ReactiveVar([]);

    this.autorun(()=> {
        const mainImg = this.data.mainImage || null;
        const imgs = this.data.images || [];

        const imgSet = Images
            .find({_id: { $in: [mainImg, ...imgs] }})
            .map(img => img.url());

        this.imgSet.set(imgSet);
    });
});

Template.slider.helpers({
    images() {
        const imgSet = Template.instance().imgSet.get();

        if(imgSet) {
            // let's give render the time to rerender
            // though I'd recommend to put that into onRendered
            Meteor.setTimeout(() => {
                $('#vertical').lightSlider({
                    gallery: true
                });
            }, 50);

            return imgSet;
        }

        return [];
    }
});

Meteor助手不设置数据

1 个答案: