我正在尝试使用jQuery UI小部件与Meteor应用程序集成。我安装了meteor-jQueryi-ui包。在这种情况下,我正在尝试使用Accordion Widget。我不确定为什么手风琴小工具没有生效,请你告诉我它为什么不起作用。以下是我的代码。谢谢
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'});
}
});
}
<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>
答案 0 :(得分:4)
我明白了。为了应用jQuery UI,您必须等待呈现特定部分。在这种情况下,我只是等到我的整个主模板加载然后应用小部件。
Template.main.rendered = function (){
$("#accordion").accordion({
heightStyle: "content"
});
};