渲染显示页面上提交Backbone.js的+轨道+轨骨干宝石 [英] render show page on submit backbone.js + rails + rails-backbone gem

问题描述

我想设置我的index.html.erb（根页面），这样我可以看到两个元素。 新岗位的形式，而新用户的形式。我想获得的形式提交按钮转到页显示用户（或后）后创建。它没有根页上的工作 - 它只是改变了URL以本地主机：3000 /＃/ X，其中x是用户（或邮寄）的ID，但是页面不会改变。然而，当我去本地主机：3000 /用户，然后尝试创建一个用户，它的变化来显示用户显示页面。这对我来说很有意义的方式（我不能把我的为什么...一些与路由和被内部的应用程序做手指？）。我只是想提交按钮进行更改，以显示页面从根页面（再次...它正常工作，一旦我在内部的应用程序）使用时。我只是张贴了上岗code，在用户code是除了随时随地后或上岗出现雷同，这将是用户或用户，分别为。下面是一些code：

I am trying to setup my index.html.erb (root page) so that I can see two elements. A "new post" form, and a "new user" form. I am trying to get the forms' submit button to go to the show page after a user (or post) is created. It doesn't work on the root page - it simply changes the url to "localhost:3000/#/x", where "x" is the id of the user (or post), but the page doesn't change. However, when I go to "localhost:3000/users" and then try to create a user, it changes to show the users show page. This makes sense to me in a way (I can't put my finger on why...something to do with routing and being "inside" the app?). I just want the submit button to make the change to the show page when being used from the root page (again...it works fine once I am "inside" the app). I am only posting the "posts" code, the "users" code is identical except that anywhere "post" or "posts" appears, it would be "user" or "users", respectively. Here is some code:

new_view.js.coffee

new_view.js.coffee

Example.Views.Posts ||= {}

class Example.Views.Posts.NewView extends Backbone.View
  template: JST["backbone/templates/posts/new"]

  events:
    "submit #new-post": "save"

  constructor: (options) ->
    super(options)
    @model = new @collection.model()

    @model.bind("change:errors", () =>
      this.render()
    )

  save: (e) ->
    e.preventDefault()
    e.stopPropagation()

    @model.unset("errors")

    @collection.create(@model.toJSON(),
      success: (post) =>
        @model = post
        window.location.hash = "/#{@model.id}"

      error: (post, jqXHR) =>
        @model.set({errors: $.parseJSON(jqXHR.responseText)})
    )

  render: ->
    $(@el).html(@template(@model.toJSON() ))

    this.$("form").backboneLink(@model)

    return this

我试着用保存功能瞎搞 - 我与window.location.hash发挥各地。我也尝试创建一个名为视图中的显示的方法，只好用它router.navigate作出这样的转变。然后我补充说：this.display（），以保存功能（右后window.location.hash行）。它改变的网址是什么，我想它是...但仍然没有页面切换（从根页）。

I've tried messing around with the "save" function - I played around with "window.location.hash". I also tried creating a method called "display" in the view, and had it use "router.navigate" to make the switch. I then added "this.display()" to the "save" function (right after "window.location.hash" line). It changed the url to what I wanted it to be...but still no page switch (from the root page).

posts_router.js.coffee

posts_router.js.coffee

class Example.Routers.PostsRouter extends Backbone.Router
  initialize: (options) ->
    @posts = new Example.Collections.PostsCollection()
    @posts.reset options.posts

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

  newPost: ->
    @view = new Example.Views.Posts.NewView(collection: @posts)
    $("#posts").html(@view.render().el)

  index: ->
    @view = new Example.Views.Posts.IndexView(posts: @posts)
    $("#posts").html(@view.render().el)

  show: (id) ->
    post = @posts.get(id)

    @view = new Example.Views.Posts.ShowView(model: post)
    $("#posts").html(@view.render().el)

  edit: (id) ->
    post = @posts.get(id)

    @view = new Example.Views.Posts.EditView(model: post)
    $("#posts").html(@view.render().el)

post.js.coffee

post.js.coffee

class Example.Models.Post extends Backbone.Model
  paramRoot: 'post'

  defaults:
    title: null
    content: null

class Example.Collections.PostsCollection extends Backbone.Collection
  model: Example.Models.Post
  url: '/posts'

index.html.erb（根页）

index.html.erb (root page)

<div id="container">Loading...</div>

<script type="text/javascript">
  $(function() {
    window.newView = new Example.Views.Users.NewView({model: <%= @users.to_json.html_safe -%>,collection: new Example.Collections.UsersCollection()});
    window.router = new Example.Routers.UsersRouter({users: <%= @users.to_json.html_safe -%>});
    var postView = new Example.Views.Posts.NewView({model: <%= @posts.to_json.html_safe -%>,collection: new Example.Collections.PostsCollection()});
    $('body').html(newView.render().$el);
    $('body').append(postView.render().$el);
    Backbone.history.start({pushState: true});
  });
</script>

我需要一个帖子的路由器？我是IM pression下，你只能有一个活动路由器。

Do I need a posts router? I am under the impression you can only have one "active" router.

在您的帮助谢谢，我会关注的帖子 - 我来评论的几分钟内响应

Thanks in advance for any help, I will be paying attention to the post - I'll be responding within a few minutes of a comment.

更新

请问example.js.coffee有什么关系呢？

Does example.js.coffee have anything to do with it?

#= require_self
#= require_tree ./templates
#= require_tree ./models
#= require_tree ./views
#= require_tree ./routers

window.Example =
  Models: {}
  Collections: {}
  Routers: {}
  Views: {}

推荐答案

好像你还没有正确初始化的命名空间，你通常做的：

解决方案

Seems you have not correctly initialised your namespaces, you usually do:

然后你可以有多个命名空间，你的情况，对于帖子，在 new_view.js.coffee ：

And then you could have more namespaces, in your case, for Posts, in new_view.js.coffee:

您也可以在第一个对象，我写更深定义命名空间

You could also define deeper namespaces in the first object I wrote:

window.Example =
  Views:
    Posts: {}
    Users: {}
  Models: {}
  Routers: {}

在这种情况下，你不会写

In this case you won't have to write

Example.Views.Posts ||= {}

在您的视图。

如果你是Rails中，你可以在写这个初始化您的清单的application.js ，虽然我读不建议写code那里，万一你选择这个，记得包括第一的application.js

If you are in Rails you could write this initialisation in your manifest application.js, although I have read is not recommended to write code there, in case you opt for this, remember to include first application.js

//= require_self
//= require_tree ./views
...

require_self 应该是第一位。

这篇关于渲染显示页面上提交Backbone.js的+轨道+轨骨干宝石的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！