我在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();
});
我执行以下操作:
localhost:3000
(欢迎乘坐,你正在铁轨页面上骑红宝石出现)
localhost:3000/posts
(骨干触发其index.jst.ejs
模板)
点击new post
,然后将更改路由至localhost:3000/posts#/new
(new.jst.ejs
)
点击create post
按钮,然后将更改路由到localhost:3000/posts#/id
(`show.jst.ejs')
现在点击browsers back button
路线更改为localhost:3000/posts#/new
(new.jst.ejs
)
再次点击后退按钮会转到localhost:3000/posts
(index.jst.ejs
)
在这里,我可以看到新条目已成功输入。
再次点击后退按钮,我会通过重新加载转到localhost:3000
。
点击forward button
返回localhost:3000/posts
(index.jst.ejs
)
我仍然可以看到我的参赛作品。
现在,如果我销毁我的参赛作品并返回localhost:3000
然后回来,我们会看到参赛作品没有被销毁。