TodoMVC(backbone.js)のバックエンドをMojoliciousにしてみた。

クライアントサイドMVCを学習したくて

自身、サーバサイドはPerl（Mojolicious)しか使えないというスキルセットなのでとりあえず、サーバサイドをMojoliciousにしてみる挑戦を無謀にも。

こちらのソースをpublic配下にコピってきて、index.htmlはindex.html.elと改名して Mojoliciousのテンプレートの方へ移動させる。その際、<%という文字を{{に変更する。

そして、javascript側にmain.jsというのを下記を参考につくって、含めた。

ただし、これだけでは不十分でescapeも追加しました。

_.templateSettings = {
    interpolate: /\{\{\=(.+?)\}\}/g,
    evaluate: /\{\{(.+?)\}\}/g,
    escape: /\{\{-(.+?)\}\}/g
};

js/collections/todos.jsを編集した。

// Save all of the todo items under the `"todos"` namespace.
//localStorage: new Backbone.LocalStorage('todos-backbone'),
url : "/todo"

あとは、ルーティング設定をして、Json処理するアプリをゴニョゴニョ書いた。

  $r->get('/')->to('root#index');
  $r->post('/todo')->to('todo#create');
  $r->get('/todo')->to('todo#fetch');
  $r->put('/todo/:id')->to('todo#put');
  $r->delete('/todo/:id')->to('todo#del');

でも、うまくいかない。画面にて、新規Todoを追加してみると、なぜかCompleted状態のTodoとして登録されてしまう。 Backboneから飛んでいるcompletedは文字列"false"な状態で飛んできているが、どこかで反転しているようだ?。いやいや、そもそもBackboneから飛んできたデータの同期結果がビューに反映されるのか？？

どこが悪いのかちょっと、良く分からない。というか、backboneのbの字も理解していないから・・・デバッグかけながら、どこで反転しているのか追っかけないと。

上手くいったらソースを公開したいのだが・・・いつになるやら、でもここまで動いてくると絶対動かしたいですな。

自己解決しました。

うまくできました。何が悪かったっていいますと、DBに格納したあとに、JSONのbooleanでなくて文字列で返していたためでした。以下のようにインフレーとしてあげたらうまく動きました。

package Todos::DB::Schema;
use Teng::Schema::Declare;
use Mojo::JSON;

    table {
        name 'Todo';
        pk id;
        columns qw( id title completed);

        inflate qq/completed/ => sub {
            my ($col_value) = @_;
            return $col_value? Mojo::JSON->true : Mojo::JSON->false;
        };

    };

1;

ソースはこちらにありますので。よかったらどうぞ。

でも、このWebアプリって、ソーシャルTodoになってしまいますなぁ。他の人のTodoもごちゃまぜに登録されるアプリとなってしまう。本来ならば、ログインしたユーザのTodoだけがみられるようにしないといけない。。その辺の実装をこれに加えていけばいいなぁ。

データ同期されたものをレンダーしにいっている

どのタイミングで同期ロジックが動くの？とかなんだかわからないことが多い。結局、同期されたデータを再度モデルに反映しているところもあるはずなんだけど、どこでやってるのだろうかとか？クライアントサイドMVCを使いこなすのはかなりハードル高そう。。まあ、ゆっくり学んでいこう。

鈍足ランナーのＩＴ日記

走るのが好きな5流のＩＴエンジニアのブログ。

TodoMVC(backbone.js)のバックエンドをMojoliciousにしてみた。

クライアントサイドMVCを学習したくて

自己解決しました。

データ同期されたものをレンダーしにいっている