2

jQuery UI ウィジェットを使用して Meteor アプリと統合しようとしています。meteor-jQueryi-uiパッケージをインストールしました。この場合、アコーディオン ウィジェットを使用しようとしています。アコーディオン ウィジェットが機能しない理由がわかりません。機能しない理由を教えてください。以下は私のコードです。ありがとうございました

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