渲染视图Backbone.js的+轨 [英] render view in backbone.js + rails

问题描述

我试图渲染视图new_view.js.coffee（一种形式来创建用户），我的根页上。我现在用的导轨骨干宝石，到目前为止，我有这样的：

I am trying to render the view "new_view.js.coffee" (a form to create users) on my root page. I am using the rails-backbone gem, so far I have this:

应用程序/视图/家庭/ index.html.erb

app/views/home/index.html.erb

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

<script type="text/javascript">
  $(function() {
    window.newView = new Example.Views.Users.NewView({model: users});
    newView.render();
    Backbone.history.start();
  });
</script>

其基本的这一个副本（从轨道骨干README.md）：

Its basically a copy of this (from the rails-backbone README.md):

应用程序/视图/职位/ index.html.erb

app/views/posts/index.html.erb

<div id="posts"></div>

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

我的新看法是这样的：

资产/ JavaScript的/骨干网/视图/用户/ new_view.js.coffee

assets/javascripts/backbone/views/users/new_view.js.coffee

Example.Views.Users ||= {}

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

  events:
    "submit #new-user": "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: (user) =>
        @model = user
        window.location.hash = "/#{@model.id}"

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

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

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

    return this

下面是我的用户的路由器：

Here is my users router:

users_router.js.coffee

users_router.js.coffee

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

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

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

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

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

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

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

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

新的模板：

资产/ JavaScript的/骨干网/模板/用户/ new.jst.ejs

assets/javascripts/backbone/templates/users/new.jst.ejs

<h1>New user</h1>

<form id="new-user" name="user">
  <div class="field">
    <label for="name"> name:</label>
    <input type="text" name="name" id="name" value="<%= name %>" >
  </div>

  <div class="field">
    <label for="email"> email:</label>
    <input type="text" name="email" id="email" value="<%= email %>" >
  </div>

  <div class="actions">
    <input type="submit" value="Create User" />
  </div>

</form>

<a href="#/index">Back</a>

当我去到本地主机：3000，我看到的是正在加载...（我把在看到应用程序是否不启动的目的）。同样，我怎么会去渲染new_view在#container的DIV上面？

When I go to localhost:3000, all I see is "Loading..." (which I put in for the purpose of seeing whether or not the app starts). Again, how would I go about rendering the new_view in the #container div above?

推荐答案

您还没有附加您呈现的内容身体：

You have not appended your rendered content to body:

  $(function() {
    window.newView = new Example.Views.Users.NewView({model: users});
    $('body').html(newView.render().$el)
    // newView.render();
    Backbone.history.start();
  });

这篇关于渲染视图Backbone.js的+轨的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！