Using jquery-layout and jquery-ui with Meteor

help
1

I’m having inconsistent results with building my layout object using jquery-layout and jquery-ui libraries. When I bring up a page where the libraries are used as part of the ‘rendered’ function, sometimes it will build out, and sometimes not.

The specific modules I’ve added are that may have some bearing on this are:
jquery
jquery-layout
mizzao:jquery-ui
twbs:bootstrap

Below is an example of what I’m trying to do with a page that has the north/south/east/west divs setup as usual. Is there some special way of invoking the below code that would give me more consistent behavior?

Template.attributesPage.rendered =  function () {


            myLayout = $('.main').layout({
                defaults: {
                    fxName: "slide"
                    , fxSpeed: "slow"
                    , spacing_closed: 14
                    , initClosed: false
                },
                west: {
                    minSize: 50
                },
                east: {
                    minSize: 200,
                    minHeight: 500
                },
                north: {
                    size: 210,
                    resizable: false,
                    closable: false,
                    spacing_open: 0,
                    spacing_close: 0
                },
                south: {
                    size: 43,
                    resizable: false,
                    closable: false,
                    spacing_open: 0,
                    spacing_close: 0
                }
            });


            var templates = Templates.find();
            var templateTreeArray = new Array();
            templates.forEach(function (currTemplate) {

                var templateTree =
                {
                    'text': currTemplate.name,
                    'state': {
                        'opened': 'true',
                        'selected': 'false'
                    },
                    'children': new Array()
                }
                if (currTemplate.name == 'Conditions') {
                    var conditions = Conditions.find();
                    conditions.forEach(function (currCondition) {
                        var attributes = Attributes.findOne({'templateId': currCondition._id});
                        var condition = {
                            'text': currCondition.name,
                            'attId': attributes._id
                        }
                        templateTree.children.push(condition);
                    }); //conditions
                } else if (currTemplate.name == 'Report Actions') {
                    var reports = ReportActions.find();
                    reports.forEach(function (currReport) {
                        var attributes = Attributes.findOne({'templateId': currReport._id});
                        var report = {
                            'text': currReport.name,
                            'attId': attributes._id
                        }
                        templateTree.children.push(report);
                    })
                } else if (currTemplate.name == 'Report Specifications') {
                    var reportSpecs = ReportSpecifications.find();
                    reportSpecs.forEach(function (currReportSpec) {
                        var attributes = Attributes.findOne({'templateId': currReportSpec._id});
                        var reportSpec = {
                            'text': currReportSpec.name,
                            'attId': attributes._id
                        }
                        templateTree.children.push(reportSpec);
                    });
                }
                templateTreeArray.push(templateTree);
            }); //templates

         ...
2

Try this ,
Template.attributesPage.onRendered(function(){// your code here}) .
This is later version of .rendered .

3

Doesn’t seem to help, it still acts pretty much the same. The code does seem to always get fired, it just doesn’t do anything to the page layout, or sometimes it lays out parts of the page but not others, and sometimes it does the whole page correctly.
It would be good to know if anyone is using the jquery layout stuff successfully within a meteor page, and if so what is there basic setup to get it to work.

Also, I’ve created a simplified page that still exhibits this behavior. Note that it is much more stable if I remove the header and footer, which consist of static html and some ‘pathFor’ links, but I can still see the behavior if I use the back button and then navigate to the layout page again.

client/templates/application/layout.html

    <div class="header">
      {{> header }}
    </div>
    <div class="main">
      {{> yield}}
    </div>
    <div class="footer">
        {{> footer }}
    </div>
</template>

lib/router.js

Router.route('/attributesMgr', {name: 'attributesMgr'});

client/templates/attributes/attributes_mgr.html

<template name="attributesMgr">
    <style>.main {
        height: 100px;
    }</style>
    <div class="ui-layout-north">
      NORTH
    </div>
    <div class="ui-layout-west">
       WEST
    </div>
    <div class="ui-layout-center">
        {{#each airlines}}
            {{> airlineItem}}<br/>
        {{/each}}
    </div>
    <div class="ui-layout-east">
       EAST
    </div>
    <div class="ui-layout-south">
   SOUTH
    </div>
</template>

client/templates/attributes/attributes_mgr.js

Template.attributesMgr.onRendered( function () {
    myLayout = $('.main').layout({
        defaults: {
            fxName: "slide"
            , fxSpeed: "slow"
            , spacing_closed: 14
            , initClosed: false
        },
        west: {
            minSize: 50
        },
        east: {
            minSize: 200,
            minHeight: 500
        },
        north: {
            size: 210,
            resizable: false,
            closable: false,
            spacing_open: 0,
            spacing_close: 0
        },
        south: {
            size: 43,
            resizable: false,
            closable: false,
            spacing_open: 0,
            spacing_close: 0
        }
    });
});

Template.attributesMgr.helpers({
    airlines: function() {
        return Airlines.find({}, {sort: {name: 1}});
    }
})