Question

所以概念很简单：你来到应用程序，你有一个默认模板，带有默认的导航元素。您单击该导航元素中的链接，然后呈现新模板：#/rails 。

从这里开始，需要隐藏默认导航，并且需要渲染新的导航。

我试图接近这个的方式，看起来有点傻：我做的是，

SG.Router.map(function(){
  this.resource('rails');
});

$(document).ready(function() {
  if($('#rails-nav').length !== 0){
    $('#main-nav').hide();
  }
});

现在问题在于，如果您从默认应用程序模板转到通过链接的rails模板 - 除非您刷新该页面，否则您将获得两个导航。我的朋友说我应该使用类似的东西：

{{outlet nav}}然后根据模板渲染导航。问题是我不知道如何设置它，我一直在寻找整个余烬网站。

有人可以帮助我吗？

Answer 1

如果我理解正确，当您说default template时，您指的是application模板，其中所有其他模板都在其{{outlet}}帮助器中呈现。

有几种方法可以实现您的目标，但我认为一个简单的方法是使用index模板作为默认模板。在这种情况下，evertyhting将更加简单并且可以根据需要工作，因为您可以通过将导航元素放在模板中来指定是否显示导航元素。

http://emberjs.jsbin.com/sume/1/edit

<强> HBS

<script type="text/x-handlebars">
    <h2> Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    This is the default template using <i>index</i>
    <br/>
    <br/>
    <span style="background-color:grey">this is the nav part {{#link-to 'rails'}}go to rails{{/link-to}}</span>
  </script>

  <script type="text/x-handlebars" data-template-name="rails">
    this is the rails app
  </script>

<强> JS

App = Ember.Application.create();

App.Router.map(function() {
  this.resource("rails");
});

此外，为了使这个答案与问题的标题更相关，为了在模板呈现一种方式时做某事，将使用didInsertElement类的View回调

App.RailsView = Ember.View.extend({
  didInsertElement:function(){
    if($('#rails-nav').length !== 0){
      $('#main-nav').hide();
    }
  }
});

http://emberjs.jsbin.com/dido/1/edit

在emberjs中渲染模板后如何使某些事情发生

1 个答案: