1

〇リリース！

Ember.js で CSS をレンダリングする際に奇妙な問題が発生しています。ページを手動で更新した後、Ember を使用しないプレーンな HTML で正常に動作するため、奇妙です。さまざまなブラウザーとさまざまな CSS ライブラリを試しましたが、すべて同じでした。

ハンドルバー テンプレート内にタブをレンダリングしたいだけです。Zurb Foundation セクションと jQuery-ui タブの両方を試しましたが、どちらもページを手動で更新した後にのみ機能します。

JSBin で問題を再現しようとしましたが、うまくいきませんでした。これを行うために、両方のライブラリのサンプル コードを使用しています。

Zurb Foundation 4.3 を使用した HTML は次のとおりです: (簡潔にするために省略された js および css ライブラリを参照)

<html>
<body>
<script type="text/x-handlebars">
  <nav class="top-bar" data-options="is_hover=false">
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">Main</a></h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>
    <section class="top-bar-section">
      <ul class="left show-on-small">
        <li>{{#linkTo 'families'}}Families{{/linkTo}}</li>
      </ul>
      <ul class="left">
        <li>{{#linkTo 'charities'}}Charities{{/linkTo}}</li>
      </ul>
    </section>
  </nav>

  <div>
    {{outlet}}
  </div>
</script>

<script type="text/x-handlebars" data-template-name="families">
  <div class="row display">
    <div class="large-3 columns">
      <span>{{#linkTo 'families.details'}}list{{/linkTo}}</span>
    </div>  
    <div class="large-9 columns">
      {{outlet}}
    </div>
  </div>
</script>

<script type="text/x-handlebars" data-template-name="families/details">
  <div class="row">
    <span>details</span>
  </div>
  <div class="row"> 
    <section class="section-container auto" data-section data-section-small-style>
      <section class="active" >
        <p class="title" data-section-title><a href="#panel1">Family Info</a></p>
        <div class="content" id="panel1" data-section-content>
          <span>Family Info goes here</span>
        </div>
      </section>
      <section>
        <p class="title" data-section-title><a href="#panel2">Members</a></p>
        <div class="content" data-slug="panel2" data-section-content>
          <span>Family members list goes here</span>
        </div>
      </section>
    </section>
  </div>
</script>

</body>
</html>

私のJavascript：

App = Em.Application.create();

App.Router.map(function() {
    this.resource('families', function() {
        this.route('details');
    });
    this.resource('charities');
});

Ember/ハンドルバーと CSS の間に既知の問題や警告があるかどうかを知りたいだけです。

ありがとうございました。

編集: http://jsbin.com/iTOsof/3でサンプルを実行していますが、更新後にローカル ホストのように動作しません

4

1 に答える 1

2

動作しない理由は、DOM がreadyイベントを発生させたときに Foundations JavaScript ハンドラーが実行されているためだと推測しています。その時点で、Ember はテンプレートをレンダリングしていないため、タブを関連付けるものはありません。

あなたがしようとすることができるのは$(document).foundation();、DetailsViewsに追加することdidInsertElementです。

App.DetailsView = Ember.View.extend({
  didInsertElement: function() {
    $(document).foundation('section'); // this will only load the section component
  }
});

ただし、Foundation の JavaScript コンポーネントは Ember と互換性がないため、Ember が同じ方法を使用してルーティングを処理しているため、Foundation が選択されたセクションにロケーション ハッシュを追加するときに問題が発生する可能性が高くなります。

以下を指定することで、Embers のロケーション メソッドを最新のバリアントに変更できます。

App.Router.reopen({
  location: 'history'
});

ただし、これは IE 9 以前とは互換性がありません。

もう 1 つの方法は、Bootstrap を Foundation の代わりに使用することです (個人的には Bootstrap よりも Foundation の方が好みですが、この場合、Ember で独自のコンポーネントを作成したくない場合は価値があるかもしれません)。次に、利用可能な Ember コンポーネントを使用します。ブートストラップの場合、http://ember-addons.github.io/bootstrap-for-ember/dist/#/show_components/tabs-panes

于 2013-09-07T08:48:08.773 に答える