與backbone.js的簡單導軌集成

無法使用導軌和骨幹呈現第一個頁面。請假設我已經正確安裝並運行了所有寶石。大多數咖啡腳本文件是使用'rails g backbone：scaffold Student'生成的，但我更改了一些文件和目錄結構。這只是爲了試圖理解流程流程。我還用db加載了一些學生數據。最後，當這個rails應用程序被部署（開發）並且訪問localhost：3000時，我沒有得到初始化函數中的警報。與backbone.js的簡單導軌集成

這裏是文件。

應用/模型/ students.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

配置/ 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 %>

應用/assets/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 .

應用程序/資產/ Javascript角/ 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'

應用程序/資產/ Javascript角/集合/ students.js.coffee

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

app/assets/javascripts/models/studen t.js.coffee

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

應用程序/資產/ Java腳本/路由器/ 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)

應用程序/資產/ Java腳本/視圖/學生/ 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

app/assets/templates/students/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>

來源

2013-03-05 Srini K

將app/views/students/index.html.erb更改爲以下代碼可解決以下問題：$（function（）{ window.Sepms.initialize（{students：％= @ students.to_json.html_safe - ％>}）; }）; ' – 2013-03-08 10:56:11

你有幾個是看似相關和不相關在同一時間的問題。

您的索引無法正確呈現的原因是因爲您有一個不存在的命名收益的內容塊。要獲得<%= content_for :javascript do %>工作，添加以下application.html.erb：

<%= yield :javascript %>

然而，這將讓你的代碼顯示，它很可能不會得到它的正常運行。
由於您使用的是軌道骨幹寶石，並利用使用模板，你只需要在你的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>

當我t來到JavaScript，確保您在瀏覽器中使用FireBug或Dev面板。 console.log（）是你最好的朋友。

來源

2013-03-19 12:55:09 MunkiPhD

是否絕對需要使用腳本標記？我意識到這是一個雞蛋......但是沒有辦法讓應用程序在rails資產管道中初始化嗎？ #nomorescripttags – Ziggy 2013-07-27 03:22:16

不是我所知道的。如果有的話，對於一個相當簡單的問題來說，它幾乎就是一個不必要的抽象。如果你在你的rails中使用coffeescript，你可以使用'$ - >'來表示與onDocumentReady（）相同的東西。 – MunkiPhD 2013-07-29 01:38:33

我想我們可以在我們的application.js文件中添加'// require require backbone/init'，然後把所有這些初始化代碼放在'app/assets/javascript/backbone/init.js'中。這是我在我的項目中採用的模式。我想我會添加我的設置的詳細說明作爲替代答案。 – Ziggy 2013-08-08 20:07:04

與backbone.js的簡單導軌集成

回答

相關問題