// common的な奴に移動したい
_.templateSettings = {
    interpolate: /\{\{(.+?)\}\}/g,
    evaluate: /\{%(.+?)%\}/g,
    escape: /\{%-(.+?)%\}/g
};

module GatheringThreadPosts {

    //とりあえずrouteをAppに混ぜたくないので分離
    //Routerクラスに直接記述する方法を考えたい
    var appRoutes = {
        "": "posts" //この機能ではrouteいらない気がするのだが知見はのこしたいので
    },
    THREADID:string,
    USERID:string;

    //ここで使われるメソッド群の総括的な役割
    export class App extends Marionette.Application {
        navbarRegion: Marionette.Region;
        constructor(threadId:string, userId:string) {
            super();

            //本当はaddInitializerとかで登録しそうだけどこれで普通に大丈夫そう
            var router = new Router({
                controller : new Controller(),
                routes     : {},//ここがないとコンパイル通らない謎
                appRoutes  : appRoutes
            });
            router.route;

            //この人は最後に書かないと直接パス指定で飛んできた時にrouterがちゃんと動かないみたい
            Backbone.history.start({pushState: false, root:""});

            USERID   = userId;
            THREADID = threadId;
        }
    }

    class Controller extends Marionette.Controller {
        posts() {
            var postsCollection = new PostsCollection();
            var layout          = new Layout();
            //ちょっと混乱したがfetchは情報の取得しかしないはずなので
            //getメソッド固定っぽい,なので指定できない
            postsCollection.fetch({
                success : (data) => {
                    layout.posts.show(new PostsView({ collection : postsCollection }));
                },
                error : (that, xhr) => {
                }
            });

        }
    };

    class Router extends Marionette.AppRouter {
    };

    //===============Model=======================================================================

    class PostModel extends Backbone.Model {
    };

    class PostsCollection extends Backbone.Collection<PostModel> {
        url:string = "/gathering_thread_posts.json";
    };

    //===============View=======================================================================

    class Layout extends Marionette.LayoutView<PostModel> {
        el:string = ".js-thread-posts-layout";

        //後でプロパティ追加するような処理の場合はあらかじめクラスで
        //宣言しとかないとコンパイルエラーになる
        posts:any;
        form:any;

        regions() {
            return {
                posts : ".js-layout-posts",
                form  : ".js-layout-post-form"
            };
        }
    };

    class PostView extends Marionette.ItemView<PostModel>{
        template:string = "#post-template";
        tagName:string  = "div";
    };

    class PostsView extends Marionette.CompositeView<PostModel, PostView>{
        childView:any             = PostView;
        template:string           = "#posts-template";
        childViewContainer:string = ".js-post-area";

        events() {
            return {
                "click .js-post-button": "sendPost",
            };
        }

        sendPost() {
            //これでサーバーに保存までできちゃったrails便利やな（小並感）。
            this.collection.create({
                posts     : this.$(".js-post-text").val(),
                thread_id : THREADID,
                user_id   : USERID //ここに入れるのはあくまで表示上で使いたいから
            });
            this.$(".js-post-text").val("");
        }

    };

}

$(document).ready(()=>{
    var app = new GatheringThreadPosts.App(
            $(".js-data-thread-id").val(),
            $(".js-data-user-id").val()
        );
    app.start
});

<input type="hidden" class="js-data-thread-id" value="<%= @gathering_thread.id %>">
<input type="hidden" class="js-data-user-id" value="<%= current_user.id %>">

<div class="js-thread-posts-layout">
  <span>スレッド</span>
  <div class="js-layout-posts"></div>
  <div class="js-layout-post-form"></div>
</div>

<script type="text/template" id="posts-template">
<div class="js-post-area">
</div>

<div>
  <textarea class="js-post-text"></textarea>
  <input type=button class="js-post-button" value="投稿">
</div>
</script>

<script type="text/template" id="post-template">
<div>
{{posts}}
{{user_id}}
</div>
</script>