meteorでCRUDアプリケーション
半年くらい前に話題になったWebアプリケーションフレームワーク
これを使ってRailsのScaffoldで作成できる簡単なCRUDアプリケーションと
同じ見た目のWebアプリケーションを作成してみた。
※Validation機能入れてなかった。まぁいいか。
こんな感じの。
以下ファイルを同階層に置くだけ。
- sample.coffee
- sample.css
- sample.html
- index.html
- edit.html
- _form.html
- show.html
- new.html
sample.coffee
@Users = new Meteor.Collection("users") @Counters = new Meteor.Collection("counters") if Meteor.isClient state = (stateName) -> Session.set("state", stateName) findAllUsers = () -> Users.find {}, { sort:{id:1}} findUser = (userid) -> Users.findOne id:parseInt userid deleteUser = (userid) -> Users.remove id:parseInt userid updateUser = (user) -> Users.update {_id:user._id}, user insertUser = (user) -> if Counters.find().count() is 0 Counters.insert c:0 Counters.update {}, {$inc:{c:1}} count = Counters.findOne {} user.id = count.c Users.insert user Handlebars.registerHelper "stateIs", (stateName) -> return Session.get("state") is stateName Template.users.users = () -> return findAllUsers() Template.show.user = () -> return findUser Session.get("userid") Template.show.notice = () -> Session.get "notice" Template._form.user = () -> userid = Session.get("userid") findUser userid if userid Template._form.events = "click #create" : () -> user = name : $("#user_name").val() email: $("#user_email").val() insertUser user Session.set "notice", "User was successfully created." router.navigate "user/#{user.id}", true "click #update" : () -> user = findUser Session.get("userid") user.name = $("#user_name").val() user.email = $("#user_email").val() updateUser user Session.set "notice", "User was successfully updated." router.navigate "user/#{user.id}", true UserRouter = Backbone.Router.extend routes: "" : "index" "user" : "index" "user/new" : "newUser" "user/:id" : "show" "user/:id/edit" : "edit" "user/:id/destroy" : "destroy" index : () -> state "index" show : (id) -> Session.set "userid", id state "show" edit : (id) -> Session.set "userid", id state "edit" destroy : (id) -> deleteUser id state "index" newUser : () -> Session.set "userid", null state "newUser" router = new UserRouter Meteor.startup () -> state "index" Backbone.history.start pushState: true if Meteor.isServer Meteor.startup () ->
sample.css
railsのCSSと同じ
sample.html
<head> <title>sample</title> </head> <body> {{> states}} </body> <template name="states"> {{#if stateIs "index"}}{{> index}}{{/if}} {{#if stateIs "show"}}{{> show}}{{/if}} {{#if stateIs "edit"}}{{> edit}}{{/if}} {{#if stateIs "newUser"}}{{> newUser}}{{/if}} </template>
index.html
<template name="index"> <h1>Listing users</h1> <table> <tr> <th>Name</th> <th>Email</th> <th></th> <th></th> <th></th> </tr> {{> users}} </table> <br /> <a href="/user/new" id="newUser">New User</a> </template> <template name="users"> {{#each users}} {{> user}} {{/each}} </template> <template name="user"> <tr> <td>{{name}}</td> <td>{{email}}</td> <td><a href="/user/{{id}}">Show</a></td> <td><a href="/user/{{id}}/edit">Edit</a></td> <td><a href="/user/{{id}}/destroy" onClick="javascript:return confirm('Are you sure?')">Destroy</a></td> </tr> </template>
edit.html
<template name="edit"> <h1>Editing user</h1> {{> _form}} <a href="/user/{{id}}">Show</a> | <a href="/user">Back</a> </template>
_form.html
<template name="_form"> {{#if errors}} <div id="error_explanation"> <h2>{{errors.length}}prohibited this user from being saved:</h2> <ul> {{#each errors}} {{/each}} </ul> </div> {{/if}} <div class="field"> <label for="user_name">Name</label><br/> <input type="text" id="user_name" size="30" value="{{#if user}}{{user.name}}{{/if}}"/> </div> <div class="field"> <label for="user_email">Email</label><br/> <input type="text" id="user_email" size="30" value="{{#if user}}{{user.email}}{{/if}}"/> </div> <div class="actions"> {{#if stateIs "newUser"}} <button id="create">Create User</button> {{else}} <button id="update">Update User</button> {{/if}} </div> </template>
show.html
<template name="show"> {{#constant}} <p id="notice">{{#if notice}}{{notice}}{{/if}}</p> {{/constant}} <p> <b>Name:</b> {{user.name}} </p> <p> <b>Email:</b> {{user.email}} </p> <a href="/user/{{user.id}}/edit">Edit</a> | <a href="/user">Back</a> </template>
new.html
<template name="newUser"> <h1>New user</h1> {{> _form}} <a href="/user">Back</a> </template>
Version 1.0公開が楽しみですね☆