【问题标题】:Meteor: oncreated vs onrendered流星:oncreated vs onrendered
【发布时间】:2016-11-23 12:42:53
【问题描述】:

两难:

  • oncreated: 模板尚未渲染(仅触发一个 每个模板的时间)。
  • onrendered:模板被渲染(触发多次)。

是否可以仅在模板完全呈现后触发函数?

我有一个消息列表,看起来与此类似

<template name="messages">
    <div id="messages">
        <span class="message">{{this.message}}</span>
    </div>
</template>

每次将新消息插入 DOM 时,我想知道消息的文本是否包含用户名。

以下代码 sn-p 运行多次,其中应该只运行一次。

Template.messages.rendered = function() {

    var username = Meteor.user().services.twitter.screenName;
    $("#messages").bind("DOMSubtreeModified", function() {    
        var lastmessage = $('.message').last().text();
        if (lastmessage.indexOf(username) > -1) {
            //Do something
        }
    }
}

通过创建和更改模板呈现的交换以包含单个消息,使函数针对每条新消息运行一次。这意味着它需要 lastmessage 变量的倒数第二个值:

Template.message.created = function() {
    var username = Meteor.user().services.twitter.screenName;

    var lastmessage = $('.message').last().text();//this is not the last message
    if (lastmessage.indexOf(username) > -1) {
        //Do something
    }
}

【问题讨论】:

  • docs 说 onRendered 只触发一次:“当 Template.myTemplate 的实例第一次渲染到 DOM 节点并放入文档时,使用此方法添加的回调被调用一次。 "
  • 好吧,在我的情况下,新消息不断附加到模板中,并且将为每条消息重新呈现。设置超时似乎是唯一有效的方法,尽管它可能不在 Meteor 的最佳实践书中。
  • @Fullhdpixel 在 javascript 或任何其他编程语言中这也不是一个好习惯,在这种情况下......它正在破坏你的代码,如果你像这样破解你的代码,它将变得越来越困难维护这样的代码。您应该以某种方式了解为什么您的 onRendered 会被多次触发。
  • 我也不确定你为什么要在 onRendered/onCreated 中这样做,但看起来这个功能的合适位置应该是在帮助程序中,但你必须考虑到多次调用助手

标签: javascript meteor dynamic-arrays


【解决方案1】:

老实说,你不能在“渲染”中做这样的事情。或者,您可以在将额外的内容渲染到 DOM 后添加一些回调。

此外,您还可以使用self.autorun(() =&gt; { if(self.alreadyRun) return; ... })self.alreadyRun = new ReactiveVar(false)

只是猜测!

var self = this;

self.alreadyRun = false;
if(self.alreadyRun){
    self.alreadyRun = true;

    // run once code here

}

【讨论】:

    【解决方案2】:

    通过将代码包装在 setTimeout 函数中来解决此问题。

    【讨论】:

    • Meteor.defer 也用于同样的目的。
    猜你喜欢
    • 1970-01-01
    • 2017-10-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-06-30
    • 1970-01-01
    • 2016-10-21
    • 1970-01-01
    相关资源
    最近更新 更多