Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Order of reactive computations changed by isolateValue #1

Open
steph643 opened this issue Oct 22, 2014 · 0 comments
Open

Order of reactive computations changed by isolateValue #1

steph643 opened this issue Oct 22, 2014 · 0 comments

Comments

@steph643
Copy link

Not using isolateValue :

<!-- Context should contain a field 'text' -->
<template name="paragraph">
    {{#if th_containsBadWords}}
        <p>You are too young to view this paragraph.</p>
    {{else}}
        <p>{{th_translatedText}}</p>
    {{/if}}
</template>

Template.blogPost.th_containsBadWords = function() {
    return MySafeText.containsBadWords(this.text);
}

Template.blogPost.th_translatedtext = function() {
    return i18n.translate(this.text);
}

Suppose the following course of action:

  1. Initially, 'text' does not contain any bad word and is displayed normally.
  2. Then 'text' is updated in the database with a value containing a bad word.
  3. Because th_containsBadWords and th_translatedtext are reactive computations depending on 'text', they might both be triggered.
  4. But because th_containsBadWords has been declared first, it is executed first, removing the very need of calling th_translatedText (which is good).

Using isolateValue :

th_containsBadWords can benefit from isolateValue, for example to avoid refreshing the {{if}} block every time 'text' is changed with an additional bad word.

Template.blogPost.th_containsBadWords = function() {
    return isolateValue(function() { MySafeText.containsBadWords(this.text) });
}

This is a huge progress over the previous version.

However there is a drawback: it seems isolateValue has changed the reactive computation order.

Here is what I see when using the new th_containsBadWords:

  1. Initially, 'text' does not contain any bad word and is displayed normally.
  2. Then 'text' is updated in the database with a value containing a bad word.
  3. Because th_containsBadWords and th_translatedtext are reactive computations depending on 'text', they might both be triggered.
  4. th_translatedText is called first, which is useless.
  5. th_containsBadWords is called next, hiding the text we have just translated.

We can put things back in order by changing also th_translatedText like this:

Template.blogPost.th_translatedtext = function() {
    return isolateValue(function() { i18n.translate(this.text) });
}

But this looks ugly.

Any idea? Am I wrong somewhere? (notice that I use Meteor 0.8.3.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant