1

0发布！

我在 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

我猜它不工作的原因是因为 Foundations JavaScript 处理程序在 DOM 触发其ready事件时正在运行，此时 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 不兼容，当 Foundation 为所选部分附加其位置哈希时，您很可能会遇到问题，因为 Ember 使用相同的方法来处理其路由。

您可以通过指定以下内容将 Embers 定位方法更改为现代变体：

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

但是，这将与 IE 9 及更低版本不兼容。

另一种选择是使用 Bootstrap 作为 Foundation 的替代品（我个人更喜欢 Foundation 而不是 Bootstrap，但在这种情况下，如果您不想在 Ember 中创建自己的组件，它可能是值得的），然后使用提供的 Ember 组件对于引导程序，http ://ember-addons.github.io/bootstrap-for-ember/dist/#/show_components/tabs-panes

于 2013-09-07T08:48:08.773 回答