0

我正在尝试设置我的 index.html.erb （根页面），以便我可以看到两个元素。一个“新帖子”表单和一个“新用户”表单。在创建用户（或帖子）后，我试图让表单的提交按钮转到显示页面。它在根页面上不起作用 - 它只是将 url 更改为“localhost:3000/#/x”，其中“x”是用户（或帖子）的 id，但页面不会改变。但是，当我转到“localhost:3000/users”然后尝试创建用户时，它会更改为显示用户显示页面。这在某种程度上对我来说很有意义（我无法解释为什么......与路由和“在”应用程序“内部”有关？）。我只希望提交按钮在从根页面使用时更改显示页面（再次......一旦我“内部”它工作正常 应用程序）。我只发布“帖子”代码，“用户”代码是相同的，除了出现“帖子”或“帖子”的任何地方，它分别是“用户”或“用户”。这是一些代码：

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”。我还尝试在视图中创建一个名为“display”的方法，并让它使用“router.navigate”进行切换。然后我将“this.display()”添加到“保存”函数中（就在“window.location.hash”行之后）。它将网址更改为我想要的网址......但仍然没有页面切换（从根页面）。

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

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（根页面）

<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>

我需要一个帖子路由器吗？我的印象是您只能拥有一个“活动”路由器。

在此先感谢您的帮助，我将关注该帖子 - 我将在发表评论后的几分钟内回复。

更新

example.js.coffee 和它有什么关系吗？

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

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

1 回答 1

0

似乎您没有正确初始化命名空间，您通常会这样做：

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

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

Example.Views.Posts ||= {}

class Example.Views.Posts.NewView ...

您还可以在我编写的第一个对象中定义更深的名称空间：

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

在这种情况下，您不必编写

Example.Views.Posts ||= {}

在你看来。

如果你在 Rails 中，你可以在你的 manifest 中写这个初始化application.js，虽然我读过不建议在那里写代码，如果你选择这个，记得先包含application.js

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

require_self应该是第一。

于 2013-05-24T15:43:28.120 回答