визуализировать представление в backbone.js + rails

Я пытаюсь отобразить представление «new_view.js.coffee» (форма для создания пользователей) на моей корневой странице. Я использую драгоценный камень rails-backbone, пока что у меня есть это:

приложение / просмотров / главная / 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 rails-backbone):

приложение / просмотров / сообщений / 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();
  });

My new view is this:

активы / javascripts / backbone / просмотров / пользователей / 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

Вот мой пользовательский маршрутизатор:

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)

«Новый» шаблон:

активы / javascripts / backbone / шаблоны / пользователи / 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>

Когда я перехожу на localhost: 3000, все, что я вижу, это «Загрузка ...» (которую я вставляю, чтобы узнать, запускается ли приложение). Опять же, как мне сделать рендеринг new_view в блоке #container выше?


person ewizard    schedule 23.05.2013    source источник
comment
Вы не передаете модель users, как в примере: _2 _...   -  person cortex    schedule 23.05.2013
comment
вы имеете в виду window.newView = new Example.Views.Users.NewView ({model: users}); vs. window.router = new Example.Routers.PostsRouter ({posts: ‹% = @ posts.to_json.html_safe -%›}); Следует ли передавать в представление те же параметры, что и в маршрутизаторе?   -  person ewizard    schedule 23.05.2013
comment
да. Вы должны передать @users.   -  person cortex    schedule 23.05.2013
comment
так что теперь у меня <div id="container">Loading...</div> <script type="text/javascript"> $(function() { window.newView = new Example.Views.Users.NewView({users: <%= @users.to_json.html_safe -%>}); $('#container').html(newView.render()); Backbone.history.start(); }); </script>   -  person ewizard    schedule 23.05.2013
comment
все еще не повезло с этим   -  person ewizard    schedule 23.05.2013


Ответы (1)


Вы не добавили отображаемый контент в тело:

  $(function() {
    window.newView = new Example.Views.Users.NewView({model: users});
    $('body').html(newView.render().$el)
    // newView.render();
    Backbone.history.start();
  });
person sites    schedule 23.05.2013
comment
я заменил newView.render (); с вашей строкой выше. Я попробовал, как есть ... а также поменял часть 'body' на '#container' - все равно не повезло. мне нужны обе строки? - person ewizard; 23.05.2013
comment
что вы имеете в виду под обзором? - person ewizard; 23.05.2013
comment
вам нужно добавить элемент, принадлежащий к просмотру, но не к самому просмотру - person sites; 23.05.2013
comment
элемент, принадлежащий представлению: $el или el, представление: newView.render() - person sites; 23.05.2013
comment
пробовал: $("#container").html(newView.render(el));, $(el).html(newView.render()); и $el.html(newView.render()); - все равно ничего, правильно ли я делаю? - person ewizard; 23.05.2013
comment
Грязь ... я чувствую себя идиотом - я пробовал ... $('#container').html(newView.render().$el); и $('body').html(newView.render().$el); - переменная body должна быть заменена переменной контейнера, правильно? - person ewizard; 23.05.2013
comment
а также .... эта линия верна? window.newView = new Example.Views.Users.NewView({model: users}); или мне нужно передать что-то еще? как в примере сообщений? - person ewizard; 23.05.2013
comment
хорошо .. я пробовал новый код ... все еще ничего ... я тоже пробовал комментировать в newView.render () ... не знаю, должен ли я это делать или нет ... независимо ... это не сработало . - person ewizard; 23.05.2013
comment
обычно этого достаточно, но у вас есть что-то странное, прочтите внимательно этот backbonejs.org/#View-constructor, обращая внимание на аргументы. - person sites; 23.05.2013
comment
print console.log(newView.render().$el) это должен быть ваш скомпилированный шаблон - person sites; 23.05.2013
comment
хорошо ... я понял ... в консоли firebug я получаю: ReferenceError: users is not defined [Break On This Error] window.newView = new Example.Views.Users.NewView({model: users}); что это значит? - person ewizard; 23.05.2013
comment
Что я сказал вам! @users. - person cortex; 23.05.2013
comment
хммм ... не думаю ... изменил его на window.newView = new Example.Views.Users.NewView({model: @users}); и получил SyntaxError: syntax error [Break On This Error] window.newView = new Example.Views.Users.NewView({model: @users}); - person ewizard; 23.05.2013