2

我正在尝试使用 jQuery UI 小部件与 Meteor 应用程序集成。我安装了meteor-jQueryi-ui包。在这种情况下，我尝试使用 Accordion Widget。我不确定为什么 Accordion Widget 没有生效，请您告诉我为什么它没有工作。下面是我的代码。谢谢

JS文件

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>
4

1 回答 1

4

我想到了。为了应用 jQuery UI，您必须等待呈现特定部分。在这种情况下，我只是等到我的整个主模板被加载然后应用小部件。

  Template.main.rendered = function (){
    $("#accordion").accordion({
      heightStyle: "content"
    });
  };
于 2013-07-19T19:59:51.820 回答