Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Jquery / Meteor

Set The Return Value Of Meteor Js Helper, Inject This Dynamically Into Template

Post a Comment
EDIT: Given the answers below, using Meteor Deps seems like the ideal play since I want to share data between two distinct templates, and it should be reactive to any changes that

Solution 1:

Assuming this html:

<body><h1>Alice</h1><h1>Bob</h1>
  {{> buttons}}
</body><templatename="buttons">
  {{#each testButtons }}
    <buttonid="{{ name }}">{{ name }}</button>
  {{/each}}
</template>

You can get it to work with this implementation:

Template.buttons.helpers({
  testButtons: function() {
    var words = UI._templateInstance().state.get('words');
    return _.map(words, function(word) {
      return {name: word};
    });
  }
});

Template.buttons.rendered = function() {
  var words = $('h1').map(function() {
    return $(this).text();
  });
  this.state.set('words', _.uniq(words));
};

Template.buttons.created = function() {
  this.state = newReactiveDict;
};

Note you will need to do: meteor add reactive-dict

When the buttons template is created is initializes its own internal reactive state. After it is rendered, it fills that state with the text from all of the h1 tags on the page. Because that state is reactive, it will then cause the testButtons to run and return the correctly formatted data to your template. Please see my post on Scoped Reactivity for more details.

Because the buttons template uses scoped reactivity, it can be used as many times as you like on any page without modification to the parent template.

Solution 2:

Whilst it's not totally clear to me why you're trying to parse the content of a table and then render it in another table (this is what you're trying to do, isn't it?), the basic principle is as follows:

Your template will rerender when any of its reactive dependencies change. So that means that you need to either:

  • store the array in question in a structure which is reactive by design (so either the minimongo, i.e the client side database), or else a Session variable.
  • use a separate (reactive) variable which just tells the template it needs to rerender at the right times.

The latter is probably less good from the perspective of app structure, but easiest to exemplify:

var renderDep = newDeps.Dependency(),
    words = [];

UI.registerHelper('testButtons', function () {
    renderDep.depend();
    return words;
});

And then whenever you call:

$( 'h1' ).map(function () {
    words = [];
    words.push($(this).text());
    uniqStrings = _.uniq(words);       
});

Make sure you call:

renderDep.changed();

immediately afterwards, and all its dependencies (i.e. the template helper) will rerun and return the new words content.

Post a Comment for "Set The Return Value Of Meteor Js Helper, Inject This Dynamically Into Template"