SPA（シングルページアプリケーション）では一つのページの中ですべてのHTMLを記述したくなりますが、それでは見通しが非常に悪くなります。SPAとはいえ、テンプレートを使って分割したり、機能を明確に分ける方が良いでしょう。 そこで使ってみたいのがbasis.jsです。

basis.jsの使い方

basis.jsのコードです。これは一つのページを表現していますが、データの追加部と表示部を分けています。

var Node = require('basis.ui').Node;
var Todo = require('basis.entity').createType('Todo', {
  title: String,
  complete: Boolean
});

Todo.all.set([
  { title: 'Write a framework', complete: true },
  { title: 'Conquer the world!' }
]);

new Node({
  container: document.body,
  template: resource('./app.tmpl'),
  action: {
    create: function(e) {
      // create new todo
      Todo({ title: this.tmpl.input.value.trim() });
      // reset input & kill event
      this.tmpl.input.value = '';
      e.die();
    }
  },

  dataSource: Todo.all,
  childClass: {
    template: resource('./todo.tmpl'),
    binding: {
      title: 'data:',
      complete: 'data:'
    },
    action: {
      toggleComplete: function() {
        this.update({ complete: !this.data.complete });
      }
    }
  }
});

テンプレートです。面白のはスタイルシートがテンプレートごとに分割され、互いに影響し合わないことです。

<b:isolate></b:isolate>
<b:style src="./app.css"></b:style>

<div class="app">
  <form class="form" event-submit="create">
    <input {input} class="input" placeholder="What needs to be done?"/>
  </form>
  <!--{childNodesHere}-->
</div>

実際に動かしているところです。上半分がapp.tmpl、下がtodo.tmplの内容になります。

basis.jsはテンプレートを使うことで（使わずに直接HTMLを指定することもできます）、シングルページアプリケーションながらもビューを分割することができます。その上でデザインも分割管理されるので一つのページを分割してメンテナンスできるようになります。

basis.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

basis.js basisjs/basisjs: JavaScript framework to build single-page applications