How to use jQuery UI Widgets with Meteor.js? -


i'm trying use jquery ui widgets integrate meteor app. installed meteor-jqueryi-ui package. in case, i'm trying use accordion widget. i'm not sure why accordion widget not taking effect, please advise me on why it's not working. below code. thank you

js file

images = new meteor.collection('images');  if (meteor.isclient) {   $("#accordion").accordion({ heightstyle: "content" });    template.element_menu.scenes = function () {     return images.find({type: 'scene'});   };    template.element_menu.characters = function () {     return images.find({type: 'character'});   };   }  if (meteor.isserver) {   meteor.startup(function () {      if(images.find().count() == 0){       images.insert({type: 'scene', src:'http://www.clker.com/cliparts/0/f/b/8/1197091304272882353carlitos_cartoon_landscape.svg.hi.png'});       images.insert({type: 'scene', src:'http://www.clker.com/cliparts/x/p/o/y/c/9/farm-fence-hi.png'});       images.insert({type: 'scene', src:'http://www.clker.com/cliparts/f/a/d/2/12988691081493617768race%20track.svg.hi.png'});       images.insert({type: 'character', src:'http://www.clker.com/cliparts/8/6/e/a/1237914684389011788studiofibonacci_cartoon_bunny.svg.hi.png'});       images.insert({type: 'character', src:'http://www.clker.com/cliparts/c/a/b/4/11954237081096120744machovka_panda.svg.hi.png'});       images.insert({type: 'character', src:'http://www.clker.com/cliparts/2/7/a/d/12262023651915431669rg1024_metalic_bear.svg.hi.png'});     }     }); }

html

    <head>   <title>story teller</title> </head>  <body>   {{> main}} </body>  <template name="main">     {{> element_menu}}         <div class="page_related_container">             <div id="page_editor">                 <div id="scene_container"></div>             </div>              <div id="page_navigation">page navigation</div>         </div>     </div> </template>  <template name="element_menu">     <div class="element_menu">         <div id="accordion">           <h3>scene</h3>           <div id="scene_list">             {{#each scenes}}             <div><img width="42" src="{{src}}"/></div>             {{/each}}           </div>           <h3>characters</h3>           <div id="character_list">             {{#each characters}}             <div><img width="42" src="{{src}}"></div>             {{/each}}           </div>           <h3>objects</h3>           <div id="object_list"></div>           <h3>text</h3>           <div id="text_list"></div>         </div>     </div> </template>

i figured out. in order jquery ui applied have wait particular section rendered. in case wait until entire main template loaded apply widgets.

  template.main.rendered = function (){     $("#accordion").accordion({       heightstyle: "content"     });   };

Comments

Post a Comment