backbone-rails:编辑和销毁页面加载时脚手架无法正常工作

时间:2014-05-20 17:47:38

标签: backbone.js ruby-on-rails-4 backbone-routing backbone-rails

我已更新了我的问题,请查看更新的部分:

我在rails-backbone gem中使用rails 4,我在github的gem页面上显示了一个简单的例子。 Backbone.js现在工作正常但是当我按下浏览器后退按钮后退回查看我的所有帖子列表时,没有显示任何内容。当我按下由脚手架生成的链接时,它工作正常。我将写下面的步骤:

rails new demo34
// Edit your Gemfile and add

gem 'rails-backbone'
// Install the gem and generate scaffolding.

bundle install
rails g backbone:install
rails g scaffold User title:string content:string
rails g backbone:scaffold User title:string content:string
rake db:migrate

在我的app/views/users/index.html.erb中,内容如下:

<div id="users"></div>

<script type="text/javascript">
  $(function() {
    // Blog is the app name
    window.router = new Demo34.Routers.UsersRouter({users: <%= @users.to_json.html_safe -%>});
    Backbone.history.start();
  });
</script>

Backbone.js现在工作正常,但是当我按browser back button后返回查看我的所有posts列表,然后nothing is displayed。当我按back生成的scaffold链接时,它可以正常工作。

我的users_router.js.coffee如下:

class Demo34.Routers.UsersRouter extends Backbone.Router
  initialize: (options) ->
    @users = new Demo34.Collections.UsersCollection()
    @users.reset options.users

  routes:
    "new"      : "newUser"
    "index"    : "index"
     ":id/edit" : "edit"
      ":id"      : "show"
    ".*"        : "index"

  newUser: ->
    @view = new Demo34.Views.Users.NewView(collection: @users)
    $("#users").html(@view.render().el)

  index: ->
    @view = new Demo34.Views.Users.IndexView(users: @users)
    $("#users").html(@view.render().el)

  show: (id) ->
    user = @users.get(id)

    @view = new Demo34.Views.Users.ShowView(model: user)
    $("#users").html(@view.render().el)

  edit: (id) ->
    user = @users.get(id)

    @view = new Demo34.Views.Users.EditView(model: user)
    $("#users").html(@view.render().el)

更新

使用以下代码,我通过主干和turbolinks为页面更改事件的后退按钮工作。现在我的骨干文本在按下按钮时不会消失。 但页面加载事件也存在问题让我用一个例子解释一下我的意思下面的意思:

 $(document).on ('page:change', function(){

    Backbone.history.stop();
     Backbone.history.start();
     });

我执行以下操作:

  1. localhost:3000(欢迎乘坐,你正在铁轨页面上骑红宝石出现)

  2. localhost:3000/posts(骨干触发其index.jst.ejs模板)

  3. 点击new post,然后将更改路由至localhost:3000/posts#/newnew.jst.ejs

  4. 点击create post按钮,然后将更改路由到localhost:3000/posts#/id(`show.jst.ejs')

  5. 现在点击browsers back button路线更改为localhost:3000/posts#/newnew.jst.ejs

  6. 再次点击后退按钮会转到localhost:3000/postsindex.jst.ejs

    在这里,我可以看到新条目已成功输入。

  7. 再次点击后退按钮,我会通过重新加载转到localhost:3000

  8. 点击forward button返回localhost:3000/postsindex.jst.ejs) 我仍然可以看到我的参赛作品。

  9. 现在,如果我销毁我的参赛作品并返回localhost:3000然后回来,我们会看到参赛作品没有被销毁。

0 个答案:

没有答案