Cape.JS
  • Tutorials
  • API Reference
  • GitHub Repository
Cape.JS Doc Tutorials API GitHub
  • What is Cape.JS?
  • Installation
  • FAQ
  • Components
    • Hello World
    • ECMAScript 6
    • Building Virtual DOM Tree
    • Click Counter
    • Shortcut Methods
    • HTML Styles
    • Todo List
    • Mixins
  • Data Stores
    • Basics
    • Ajax
  • Collection Agents
    • Basics
    • Agent Adapters
    • Defining Classes
    • Initialization
    • Creating Resources
    • REST Operations
    • Callbacks and Error Handlers
    • Changing the Path Prefix
    • Options
  • Resource Agents
    • Basics
    • Agent Adapters
    • Defining Classes
    • Creating a New Resource
    • Editing a Resource
    • Building a Dual-Use Form
    • Deleting a Resource
    • Specifying a Callback
    • Options
  • Router
    • Simple Routes
    • Containers
    • Resource Based Routes
    • Singular Resources
    • Nested Resources
    • Namespaces
    • Adding Custom Actions
    • Changing Root Container
    • Vars
    • Flash
    • Navigation and Redirection
    • Component Replacement
    • Query Rarams
    • Before-Navigation Callbacks
  • Tutorials
    • How to Make a Single Page Application (SPA) with Cape.JS and Rails
    • Cape.JS Primer
  • API Reference

Tutorials

How to Make a Single Page Application (SPA) with Cape.JS and Rails

By reading through this tutorial, you can learn how to construct Single Page Applications (SPAs) combining the Cape.JS with Ruby on Rails.

  • Preface
  • Setting up
  • Creating the Top Page
  • Showing the Reception Component
  • Navigation Among Pages
  • Rendering an HTML Form
  • Models and Resources
  • Collection Agent
  • Showing Error Messages
  • Refactoring with Partials
  • Listing Registered Visitors

Cape.JS Primer

Let’s learn the programming of Cape.JS by combining Ruby on Rails with Cape.JS and making an easy TODO administration application step by step.

  • Preface
  • Hello, world!
  • Reference of custom attribute value and nesting of HTML elements
  • Creating the text nodes
  • Integrate Cape.JS with Ruby on Rails (1)
  • Integrate Cape.JS with Ruby on Rails (2)
  • Let the component have the date
  • Initializing the date with Ajax
  • Assignment of event handler
  • Updating the data with Ajax
  • The data store
  • Show the form for new task
  • Creating new task
  • The edit form of the task
  • Update the task
  • Delete the task
  • Cape.JS 1.2
  • Collection agent (1)
  • Collection agent (2)
  • Collection agent (3)
  • Change displaying order (1)
  • Change displaying order (2)
  • Change displaying order (3)
This tutorial is an English translation of blog entries written in Japanese.
Copyright © 2015-2016 Tsutomu Kuroda and contributors.
Copyright © 2015-2016 Tsutomu Kuroda and contributors.