1

我想知道是否有人建立了自己的 waitOn 功能？我没有使用 subscribe 来驱动 waitOn ，而是我想等待一个助手来触发就绪状态，如下所示：

this.route('edit_Record', {
    path: '/record/edit/:_id',
    waitOn: function() {
            return XXXXX;
        }
    });

Template.edit_Record.helpers({
    selectedRecord: function () {
        wait(3000);
        var x = myRecords.findOne({_id: this.editid});
        //XXXXX  This is where I want to set 'ready'
        return x;
    }
});
4

2 回答 2

2

我设计了自己的模式来使用自定义 waitOn。您应该知道 IronRouter 不会呈现您的模板（因此它的任何助手都不会呈现，除非您手动调用它们，这通常很奇怪）除非 waitOn 函数中指定的每个句柄都准备好。

waitOn 是一种响应式计算，因此您指定的句柄应该是响应式数据源，并且随着它们的就绪状态的发展，waitOn 将自动重新评估，并最终通知 IronRouter 可以渲染模板。

因此，如果我们想将 waitOn 与订阅句柄以外的东西一起使用，我们必须使用响应式 ready() 方法（来自文档）实现我们自己的对象。我们称这个对象为“Waiter”，因为它的作用是等待某个事件发生，然后将其内部状态设置为就绪。

我将向您介绍一个解决常见问题的简单示例：图像预加载。假设您有一个模板渲染图像元素，其 src 属性存储在 Collection 中：您希望仅在客户端加载图像时渲染模板。

<template name="view">
    <div>
        <h1>{{title}}</h1>
        <img src="{{firstImageUrl}}" />
        <img src="{{secondImageUrl}}" />
    </div>
</template>

我想出了以下界面：

this.route("view",{
    path:"/view/:_id",
    loadingTemplate:"loadingTemplate",
    template:"view",
    // our Waiter object handle designed to wait until images are loaded
    imagePreloadingWaiter:new ImagePreloadingWaiter(),
    // load is called only once each time the route is triggered
    load:function(){
        // reset our waiter
        this.imagePreloadingWaiter.reset();
    },
    // before : reactive computation that will be rerun until the route template is rendered
    before:function(){
        // setup collection subscription
        var subscriptionHandle=this.subscribe("collectionById",this.params._id);
        if(subscriptionHandle.ready()){
            // get the route data context
            var collection=this.data();
            // collect the images URLs we want to preload
            var params={
                images:[
                    collection.firstImageUrl,
                    collection.secondImageUrl
                ]
            };
            // fire the preloader
            this.imagePreloadingWaiter.fire(params);
        }
    },
    // we specify that we want to wait on our ImagePreloadingWaiter handle
    waitOn:function(){
        return this.imagePreloadingWaiter;
    },
    // return the data context used by this route
    data:function(){
        return Collection.findOne(this.params._id);
    }
});

使用此路由定义，我们会显示加载模板，直到最终加载存储在集合中的图像 URL，这要归功于 waitOn 方法等待我们的 ImagePreloadingWaiter 接口句柄。

好的，现在我们对想要使用的接口有了一个概述，让我们实际实现它：

// Simple interface to use with the IronRouter waitOn method
Waiter=function(){
    // avoid firing the waiter multiple time in a Deps.Computation context
    this.isFired=false;
    // reactive data source : have we been waiting long enough ?
    this.isReady=false;
    this.dependency=new Deps.Dependency();
};

_.extend(Waiter.prototype,{
    // reset method, clear the waiter state
    reset:function(){
        this.isFired=false;
        //
        this.isReady=false;
        this.dependency.changed();
    },
    // reactive ready method : this is the interface needed by waitOn
    ready:function(){
        this.dependency.depend();
        return this.isReady;
    },
    // fire the Waiter object only once before being resetted
    fire:function(params){
        if(!this.isFired){
            this.isFired=true;
            // this abstract method must be overloaded in child classes
            this.wait(params);
        }
    },
    // must be called in Waiter.wait() to acknowledge we're done waiting
    waitedEnough:function(){
        // if we have reset the Waiter meanwhile, silently discard the notification
        if(this.isFired){
            this.isReady=true;
            this.dependency.changed();
        }
    }
});

// Simple waiter that simply waits N seconds before getting ready
TimeoutWaiter=function(){
    Waiter.call(this);
};
TimeoutWaiter.prototype=Object.create(Waiter.prototype);

_.extend(TimeoutWaiter.prototype,{
    wait:function(params){
        var self=this;
        // after N seconds, notify that we are done waiting
        Meteor.setTimeout(function(){
            self.waitedEnough();
        },params.seconds*1000);
    }
});

// Image preloader for the IronRouter
ImagePreloadingWaiter=function(){
    Waiter.call(this);
};
ImagePreloadingWaiter.prototype=Object.create(Waiter.prototype);

_.extend(ImagePreloadingWaiter.prototype,{
    wait:function(params){
        var self=this;
        //
        if(images.length>0){
            var imageLoadedCounter=0;
            _.each(images,function(imageUrl){
                function onImageLoadOrError(){
                    imageLoadedCounter++;
                    if(imageLoadedCounter==images.length){
                        self.waitedEnough();
                    }
                }
                //
                var image=$("<img/>");
                image.load(onImageLoadOrError);
                image.error(onImageLoadOrError);
                image.prop("src",imageUrl);
            });
        }
        else{
            self.waitedEnough();
        }
    }
});

使用这个例子，我相信你会找到一个很好的解决方案来回答你的问题。

特别是，我认为您可能希望将“帮助”逻辑代码移动到 before IronRouter 钩子中。如果我的代码不清楚，请随时提出问题。

于 2014-01-07T11:07:30.747 回答
1

你可以在你的模板中使用没有 ironRouter 的东西。假设您有一个名为“加载”的模板，并且您正在使用一个名为“布局”的布局，该布局与 Ironrouter 一起设置

HTML

<template name="layout">
    {{#if isready}}
      {{yield}}
    {{else}}
     {{>loading}}
    {{/if
</template>

Javascript（客户端）

Template.layout.isready = function() {
   return !Session.get("isnotready");
}

Template.edit_Record.helpers({
    selectedRecord: function () {
        Session.set("isnotready", true);
        wait(3000);
        var x = myRecords.findOne({_id: this.editid});
        Session.set("isnotready, false);
        return x;
    }
});
于 2014-01-07T13:05:51.037 回答