148


マウスカーソルをのせても、クリックしてもドロップダウンメニューが開きません。やったこと：

プロジェクトを作ってパッケージを追加:

[code]

    $ meteor create dropdown-test
    $ cd dropdown-test
    $ meteor add iron:router ewall:foundation
    
[/code]

`dropdown-
test.html`にFoundationのドロップダウンメニューを[サンプル](http://foundation.zurb.com/docs/components/topbar.html)からコピペ:

[code]

    <template name="layout">
      <nav class="top-bar" data-topbar role="navigation">
        <section class="top-bar-section">
          <ul class="right">
            <li class="active"><a href="#">Right Button Active</a></li>
            <li class="has-dropdown">
              <a href="#">Right Button Dropdown</a>
              <ul class="dropdown">
                <li><a href="#">First link in dropdown</a></li>
                <li class="active"><a href="#">Active link in dropdown</a></li>
              </ul>
            </li>
          </ul>
        </section>
      </nav>
      <div id="main" class="row">
        {{> yield}}
      </div>
    </template>
    
    <template name="hello">
      Hello world!
    </template>
    
[/code]

`dropdown-test.js`にルーティング情報を追加

[code]

    Router.configure({
      layoutTemplate: 'layout'
    });
    
    Router.route('/', {name: 'hello'});
    
[/code]

meteorを実行

[code]

    $ meteor
    
[/code]

各バージョン:

  * meteor: 1.0
  * ewall:foundation: 5.4.6
  * iron:router: 1.0.0


CC BY-SA 3.0
2014-10-31T03:55:40.883
147
2014-11-01T09:29:56.613
2014-10-31T21:54:57.847
12
30
question
meteor iron-router
MeteorでIron Routerを使うとFoundationのドロップダウンメニューが動かない


[別のFoundation用パッケージのReadme](https://github.com/juliancwirko/meteor-
zf5)に書かれているように、ルーティング後にFoundationを初期化するようにする必要があります。

たとえば`dropdown-test.js`に以下を足します。

[code]

    if (Meteor.isClient) {
      Meteor.startup(function () {
        if (typeof(Router) !== 'undefined' && Router.onAfterAction) {
          Router.onAfterAction(function () {
            Tracker.afterFlush(function () {
              $(document).foundation('reflow');
            });
          });
        } else {
          UI.body.rendered = function () {
            $(document).foundation('reflow');
          };
        }
      });
    }
    
[/code]

ルーティングとは無関係にテンプレートがレンダリングされることがある場合は、そのテンプレートの`rendered`コールバックで初期化を制御できます。

[code]

    Template.alert.rendered = function () {
      // alertプラグインのみ初期化
      $(document).foundation('alert', 'reflow');
    };
    
[/code]


CC BY-SA 3.0
2014-10-31T03:55:40.883
148
2014-11-01T09:29:56.613
2014-11-01T09:29:56.613
30
30
147
answer