Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
10
Help us understand the problem. What is going on with this article?
@Feel-Physics

rails-backbone gemを使ってとりあえず単ページJS CRUDアプリケーションを作ってみる

More than 5 years have passed since last update.

今回はRubyMineを使うが、それ以外の場合もほぼ同じだろう。

  1. rails applicationを作る

アプリケーション名があとで必要になる。

  1. コードを書く
Gemfile
gem "rails-backbone"
  1. bundle install

  2. Tools > Run Rails Script > rails, g backbone:install

  3. app/assets/javascripts/backbone/に以下のフォルダができる

routers/
models/
templates/
views/
  1. Tools > Run Rails Generator > scaffold > Post title:string content:string

  2. Tools > Run Rails Script > rails, g backbone:model

app/assets/javascript/backbone/modelsにBackboneのモデルとコレクションができる。

  1. Tools > Run Rake Task > db:migrate

  2. Tools > Run Rails Script > rails, g backbone:scaffold Post title:string content:string

  3. コードを書く

Blogの部分をアプリケーション名で置き換えること。

app/views/index.html.erb
<div id="posts"></div>

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

  2. ブラウザで見ると、単ページ・アプリケーションができている


ブログやってます:PAPA-tronix !

10
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Feel-Physics
今はHoloLensのアプリを開発しており、技術記事はすべてブログ( http://weed.nagoya )に書いています。以前はSwift、OpenCV+Python、JavaScript、Objective-Cを書いていました。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
10
Help us understand the problem. What is going on with this article?