浏览器返回不渲染我的上一页

时间:2014-05-10 07:53:49

标签: javascript ember.js

这是我的代码。我面临两个问题。 1.当我从表单中单击浏览器后退按钮时,不呈现我的formList 2.当我刷新页面时,它没有再次调用render方法。

App.Router.map(function() {
    this.resource('formList', { path: '/formList' }, function() {
        this.route('form');
    });
});

App.IndexRoute = Ember.Route.extend({

    redirect : function() {
        this.transitionTo('formList');
    }
});

App.FormListFormRoute = Ember.Route.extend({

    renderTemplate: function(){
        this.render('formListForm', {
            into:'application',
            outlet: 'appBody'
        });
    }
});

App.FormListRoute = Ember.Route.extend({

    renderTemplate: function(){
        this.render('formList', {
            into:'application',
            outlet: 'appBody'
        });
    }
});

1 个答案:

答案 0 :(得分:1)

formListformListForm的父级。它应该在dom中存在。不幸的是,当您访问formListForm时,您要从dom中删除formList,但Ember并不知道这一点,并且由于您的路由器formList已经存在而受到影响在页面中,所以它不会浪费任何时间重新渲染已存在的东西。

尽管如此,手动渲染并不是必需的。默认情况下,Ember会将树中的每个路径/资源渲染到父资源的空{{outlet}}。从应用程序模板(应用程序的根目录或/)开始。我重写了你的例子

申请模板

  <script type="text/x-handlebars" data-template-name='application'>
    <h2> Welcome to Ember.js</h2>

    {{link-to 'Form List Form' 'formList.form'}}

    {{outlet}}
  </script>

表单列表模板

  <script type="text/x-handlebars" data-template-name="formList">
    <h2 class='formList'> Form List</h2>
    <h4 class='formList'>Info that always shows up in the form list</h4>
    {{outlet}}
  </script>

表单列表索引模板

   <script type="text/x-handlebars" data-template-name="formList/index">
   <h4 class='formListIndex'>Info that only shows up in the form list when visiting /formList</h4>
  </script>

表单列表表单模板

  <script type="text/x-handlebars" data-template-name="formList/form">
   <h4 class='formListForm'> Viewing the form route</h4>
  </script>

显示它的示例

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