marionette.jsのチュートリアルの続き。

ここから、クライアント側の話。

先に言うと、メインのmarionetteは、この記事でなく、その３なので読んで飽きてきたら、その３に飛ぶべし。

前回に引き続き、gruntを起動している状態で進める事。

もし、起動していなければ、gruntを起動する。

model

初めにmodel を作る。

railsみたいに、MVC,routerそれぞれのgeneratorが準備されているので、勿論それを使う。

$ yo marionette:model task
   create app/scripts/models/task.js
   invoke   mocha-amd:unitTest
   create     test/spec/models/task.js
 conflict     test/spec/testSuite.js
[?] Overwrite test/spec/testSuite.js? overwrite
    force     test/spec/testSuite.js

上書き聞かれたらenter!

これで、基本的なmodel + testのひな形が出来ている。

気になる人は、以下のファイルを見てみよう。

app/scripts/models/task.js
test/spec/models/task.js

ここから、ようやく、プログラミングしていく。

さっき作ったAPIのendpointと繋げる

//app/scripts/models/task.js 
    urlRoot: "/api/v1/tasks",

それと、重要なのは、mongodbはidが「_id」なのに、その設定が今のgeneratorに無いので、付ける
- ※近く、pull reqしておきます。

idAttribute: "_id";

画面作成

ここから画面を作る。

まずは、taskを新規登録するためのinputタグを作る。

//app/index.html
      <div class="hero-unit">
        <input type="TEXT" id="new-todo" placeholder="ここに何か書いてEnter"></input>
      </div>

あと、余計なsample描写処理を消しておく

diff --git a/app/scripts/application.js b/app/scripts/application.js
@@ -16,7 +16,6 @@ 
-               document.body.innerHTML = welcomeTmpl({ success: "CONGRATS!" });

ここまでで、基本的な画面がブラウザに出来てるはず。

View

さて、このinputタグにtask追加用のイベントを

登録させたいので、Viewを追加する。

ここで、そろそろ、marionetteのItemViewを使いたい所だが、

この場合、単に追加イベントを登録したいだけで、

render処理やtemplateも要らないので、BackboneのViewで十分。

なので、BackboneのViewを使う。これもgenerator使う。

$ yo marionette:view new_task

注意：ハイフン区切りでなく、アンスコ区切りで。

ちなみに、ここで、元のgenerator-marionetteのページのように、new-task（ハイフン区切り）と書くと、こんなエラーになる。

Running "exec:mocha" (exec) task
SyntaxError: Parse error

>> Exited with code: 1.

これは、今の作りだと、そのままmochaのテストの変数もハイフンはいってしまいエラーになってるため。

なので、ハイフン区切り(とかラクダとか)でgenerator使った方がいい。※せっかく、generator使ってるのに一々直したら面倒臭いしね。文句がある人は、pull reqを...

Eventを追加する。

new_taskのviewに、eventを追加して、

enterボタン押された時のメソッドを準備する。

diff --git a/app/scripts/application.js b/app/scripts/application.js
@@ -1,23 +1,26 @@
 define([
        'backbone',
        'communicator',
-       'hbs!tmpl/welcome'
+  'views/new_task'
 ],
 
-function( Backbone, Communicator, Welcome_tmpl ) {
+function( Backbone, Communicator, NewTaskView ) {
     'use strict';
 
-       var welcomeTmpl = Welcome_tmpl;
-
        var App = new Backbone.Marionette.Application();
 
        /* Add application regions here */
-       App.addRegions({});
+       App.addRegions({
+    newTask: "#new-todo"
+  });
 
        /* Add initializers here */
        App.addInitializer( function () {
                Communicator.mediator.trigger("APP:START");
+             App.newTask.attachView(new NewTaskView({el: App.newTask.el}));
        });
 
        return App;
 });

diff --git a/app/scripts/views/new_task.js b/app/scripts/views/new_task.js
@@ -5,8 +5,17 @@ function(Backbone){
     'use strict';
 
        return Backbone.View.extend({
+    el: "#new-todo",
+    events: {
+      "keypress": "postTask"
+    },
                initialize: function() {
                        console.log("initialize a NewTask View");
-               }
+               },
+    postTask: function(event){
+      if(event.keyCode == 13){
+        console.log("ENTERED!");
+      }
+    }

ItemViewではなく、ただの生のViewなので、自分でelとか追加しないといけない
それでも、あくまで、regionにelを外出ししておくと、後で、自分のソースが読み易い。
- （全体として、どういう画面でできているのか、region見れば分かる状態になる。)

ここから

さて、これで、Modelと新規作成できるViewができた。

ここで、メインディッシュのMarionetteの

ItemViewとCollectionViewが出てくるのだが...

長くなったので、ここで、また一旦切る。

続き

http://lxyuma.hatenablog.com/entry/2013/10/27/230143

lxyuma BLOG

開発関係のメモ

Marionette.js(Backbone.js)のチュートリアル with yeoman その２（Modelと基本View側実装編）