0

レールとバックボーンを使用して最初のページをレンダリングする際に問題が発生しました。すべての gem が適切にインストールされ、実行されていると仮定してください。ほとんどの coffeescript ファイルは「rails g backbone:scaffold Student」を使用して生成されますが、一部のファイルとディレクトリ構造を変更しました。これは、何よりもプロセスの流れを理解しようとするためです。また、生徒のデータを db にロードしました。最後に、この Rails アプリケーションをデプロイ (開発) し、localhost:3000 にアクセスすると、初期化機能にあるアラートが表示されません。

ここにファイルがあります。

アプリ/モデル/学生.rb

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

app/controllers/students_controller.rb

class StudentsController < ApplicationController
  respond_to :html, :json

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

config/routes.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'

app/assets/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'

app/assets/javascripts/routers/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)

app/assets/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>
4

1 に答える 1

1

一見関連しているように見える問題と、同時に関連していないように見える問題がいくつかあります。

  1. インデックスが正しく表示されない理由は、yield という名前のコンテンツ ブロックが存在しないためです。作業を<%= content_for :javascript do %>開始するには、次を に追加しますapplication.html.erb。

    <%= yield :javascript %>

    ただし、これによりコードが表示されますが、正しく実行されない可能性が高くなります。

  2. 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 または Dev パネルを使用していることを確認してください。console.log()はあなたの親友です。

于 2013-03-19T12:55:09.303 に答える