backbone.js - 与backbone.js 的简单rails 集成

Question

使用 Rails 和主干呈现第一页时遇到问题。请假设我已正确安装并运行所有 gem。大多数咖啡脚本文件是使用“rails g主干：脚手架学生”生成的，但我更改了一些文件和目录结构。这只是为了尝试理解流程而不是其他任何事情。我还在数据库中加载了一些学生数据。最后，当这个 Rails 应用程序被部署（开发）并且我访问 localhost:3000 时，我没有收到初始化函数中的警报。

这是文件。

应用程序/模型/学生.rb

class Student < ActiveRecord::Base
  attr_accessible :dob, :email, :name, :phone_number
end

应用程序/控制器/students_controller.rb

class StudentsController < ApplicationController
  respond_to :html, :json

  def index
    respond_with (@students = Student.all)
  end
end

配置/路由.rb

School::Application.routes.draw do

  resources :students

  root :to => 'students#index'

应用程序/视图/布局/application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>School</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>
  <tbody>
    <div id="students">
      <%= yield %>
    </div>
  </tbody>
</body>
</html>

应用程序/视图/学生/index.html.erb

<%= content_for :javascript do %>
  <%= javascript_tag do %>
    window.School.initialize({ students: <%= @students.to_json %> });
  <% end %>
<% end %>

应用程序/资产/javascripts/application.js

//
//= require jquery
//= require jquery_ujs
//= require jquery-ui-1.8.18.custom.min
//
//= require underscore
//= require json2
//= require backbone
//= require backbone_rails_sync
//= require backbone_datalink
//= require backbone-forms
//= require school
//= require_tree ./models
//= require_tree ./collections
//= require_tree ./views
//= require_tree ./routers
//= require_tree ../templates
//= require_tree .

应用程序/资产/javascripts/school.js.coffee

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

window.School =
  Models: {}
  Collections: {}
  Routers: {}
  Views: {}
  initialize: (data) -> alert 'Hello for rails'

应用程序/资产/javascripts/collections/students.js.coffee

class School.Collections.StudentsCollection extends Backbone.Collection
  model: School.Models.Student
  url: '/students'

应用程序/资产/javascripts/models/student.js.coffee

class School.Models.Student extends Backbone.Model
  paramRoot: 'student'

应用程序/资产/javascripts/路由器/students_router.js.coffee

class School.Routers.StudentsRouter extends Backbone.Router
  initialize: (options) ->
    @students = new School.Collections.StudentsCollection()
    @students.reset options.students

  routes:
    "index"    : "index"
    ".*"       : "index"

  index: ->
    @view = new School.Views.Students.IndexView(students: @students)
    $("#students").html(@view.render().el)

应用程序/资产/javascripts/views/students/index_view.js.coffee

School.Views.Students ||= {}

class School.Views.Students.IndexView extends Backbone.View
  template: JST["templates/students/index"]

  initialize: () ->
    @options.students.bind('reset', @addAll)

  addAll: () =>
    @options.students.each(@addOne)

  addOne: (student) =>
    view = new School.Views.Students.StudentView({model : student})
    @$("tbody").append(view.render().el)

  render: =>
    @$el.html(@template(students: @options.students.toJSON() ))
    @addAll()

    return this

应用程序/资产/模板/学生/index.jst.ejs

<h1>Listing students</h1>

<table id="students-table">
  <tr>
    <th>Name</th>
    <th>DOB</th>
    <th>Email</th>
  </tr>
</table>

html输出

<!DOCTYPE html>
<html>
<head>
  <title>School</title>
  <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/students.css?body=1" media="all" rel="stylesheet" type="text/css" />
  <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-1.8.18.custom.min.js?body=1" type="text/javascript"></script>
<script src="/assets/underscore.js?body=1" type="text/javascript"></script>
<script src="/assets/json2.js?body=1" type="text/javascript"></script>
<script src="/assets/backbone.js?body=1" type="text/javascript"></script>
<script src="/assets/backbone_rails_sync.js?body=1" type="text/javascript"></script>
<script src="/assets/backbone_datalink.js?body=1" type="text/javascript"></script>
<script src="/assets/backbone-forms.js?body=1" type="text/javascript"></script>
<script src="/assets/school.js?body=1" type="text/javascript"></script>
<script src="/assets/students/edit.js?body=1" type="text/javascript"></script>
<script src="/assets/students/index.js?body=1" type="text/javascript"></script>
<script src="/assets/students/new.js?body=1" type="text/javascript"></script>
<script src="/assets/students/show.js?body=1" type="text/javascript"></script>
<script src="/assets/students/student.js?body=1" type="text/javascript"></script>
<script src="/assets/models/student.js?body=1" type="text/javascript"></script>
<script src="/assets/collections/students.js?body=1" type="text/javascript"></script>
<script src="/assets/views/students/edit_view.js?body=1" type="text/javascript"></script>
<script src="/assets/views/students/index_view.js?body=1" type="text/javascript"></script>
<script src="/assets/views/students/new_view.js?body=1" type="text/javascript"></script>
<script src="/assets/views/students/show_view.js?body=1" type="text/javascript"></script>
<script src="/assets/views/students/student_view.js?body=1" type="text/javascript"></script>
<script src="/assets/routers/students_router.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="46vcYK8H3HIUfZh9wfu+AtzCKs+/2TnESA2ILxhFx0E=" name="csrf-token" />
</head>
<body>
  <tbody>
  <div id="students">

  </div>
  </tbody>
</body>
</html>

score 1 · Accepted Answer

你有几个看似相关和不相关的问题。

您的索引未正确呈现的原因是因为您有一个不存在的命名收益的内容块。要开始<%= content_for :javascript do %>工作，请将以下内容添加到application.html.erb：

<%= yield :javascript %>

但是，这将使您的代码显示出来，它很可能不会让它正确运行。
由于您正在使用rails-backbone gem 并利用模板，您只需在 index.html.erb 中包含以下内容：
```
 <div id="students"></div>
```

然后使用以下命令在index.html.erb中实例化您的骨干路由器：

<script type="text/javascript">
  $(function(){
   try {
     window.SchoolRouter = new School.Routers.StudentsRouter({ students: <%= @students.to_json %> });
     backbone.history.start();
   }catch(e){
     alert(e); // alert so that you see it.
   }
  });
</script>

当涉及到 JavaScript 时，请确保您在浏览器中使用 FireBug 或开发面板。console.log()是你最好的朋友。

backbone.js - 与backbone.js 的简单rails 集成

1 回答 1

Related

Reference