Use jQuery selector

vinay 2015-07-26 17:50:06 UTC #1

Hello

I am trying to use jQuery selector in a div in a structure like:

{{#Node _onRender="setupPlugin"}}
    {{#DOMElement class="mainContent"}}
      <div id="pages">
          <div class="page">Page 1</div>
          <div class="page">Page 2</div>
      </div>
    {{/DOMElement}}
{{/Node}}

In helpers of the template that contains given markup, I have defined setupPlugin, where I want to initialise a jQuery plugin. While initialising, I need to use jQuery selector. I tried to use $('#pages'), but got 0 elements in it while debugging. Hence my plugin failed.

When exactly do the DOM elements get rendered/loaded? Instead of _onRender, is there any other event that fires when rendering of inner DOM elements (divs) is complete? Or else how should I go about it?

gadicc 2015-07-26 20:58:55 UTC #2

Hey @vinay

Yeah, this is similar to https://github.com/gadicc/meteor-famous-views/issues/260 (but quite happy to have it on the forums too!). Because of how famous works, when the node is added to the scene graph vs when the DOMElement is rendered to the DOM happen at different times.

I might end up simply adding an _onRender callback to DOMElement too, otherwise the current suggested pattern is what @trusktr did in that issue... have an inner template inside the DOMElement with it's own rendered callback.

Either way, try doing this.$('#pages'), etc, inside template callbacks... it's both faster and will also work in some cases when the template is constructed but not on the actual DOM yet (although I think we got rid of most of those).

vinay 2015-07-27 19:21:52 UTC #3

Thanks. I am facing another problem, now.
As you suggested, my code looks like this:

<body>
{{#Scene}}
    {{#Node id="mainNode"}}
        {{>mainPage}}
    {{/Node}}
{{/Scene}}

</body>

<template name="mainPage">
    {{> mainContent}}
    {{> navBar}}
</template>

<template name="mainContent">
    {{#Node id="contentNode"}}
        {{#DOMElement}}
            {{>pages}}
        {{/DOMElement}}
    {{/Node}}
</template>

<template name="pages">
    <div id="pagesId">
        <div style="width:100%; height:100%">Page 1</div>
        <div style="width:100%; height:100%">Page 2</div>
    </div>
</template>

And the onRendered is as follows:

Template.pages.onRendered(function(){
		"use strict";
		var pagesElem = $("#pagesId");
		pagesElem.someFunc({
			display: 'single',
			width: '100%',
			height: '100%',
			autoCenter: true
		});
	});

Here, while debugging, I still get the size of $("#pagesId") to be 0,0. I want these values to be 100% of the parent size. I have tried with 'contentNode' and 'mainNode' sizes to be size="P:1.0; P:1.0", with no success.