AngularJS の方が Knockout.js よりも短くスッキリ書けそうな感じなので乗り替えてしまおうかと

backbone.js より短く書けるらしいという理由で knockout.js を使おうかと思ったけど、AngularJS の方がより短く書けるかも。

試しにフォームに文字列を入力するとその下に表示されていくだけの簡単なコードを書いてみた。

Knockout.js

http://knockoutjs.com/

HTML

index.html
*1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>KnockoutJS</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
    <script src="todo.js"></script>
  </head>
  <body>
    <h1>KnockoutJS</h1>

    <form data-bind="submit: addTodo">
      <input type="text" data-bind="value: todoTitle" />
    </form>

    <table>
      <tbody data-bind="foreach: todos">
        <tr>
          <td data-bind="text: title"></td>
        </tr>
      </tbody>
    </table>

  </body>
</html>

Javascript

todo.js

$(function() {
  var Todo = function(title) {
    this.title = ko.observable(title);
  };

  var TodoViewModel = function() {
    var self = this;
    self.todos = ko.observableArray([]);
    self.todoTitle = ko.observable('');

    self.addTodo = function() {
      self.todos.push(new Todo(
        self.todoTitle()
      ));
      self.todoTitle('');
    };
  };

  ko.applyBindings(new TodoViewModel());
});

AngularJS

http://www.angularjs.org/

HTML

index.html
*2

<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="UTF-8" />
    <title>AngularJS</title>
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    <script src="todo.js"></script>
  </head>
  <body>
    <h1>AngularJS</h1>
    
    <div ng-controller="TodoCtrl">
      <form ng-submit="addTodo()">
        <input type="text" ng-model="todoText" />
      </form>

      <table>
        <tbody>
          <tr ng-repeat="todo in todos">
            <td>{{todo.text}}</td>
          </tr>
        </tbody>
      </table>
    </div>

  </body>
</html>

Javascript

todo.js

function TodoCtrl($scope) {
  $scope.todos = [];

  $scope.addTodo = function() {
    $scope.todos.push({text: $scope.todoText});
    $scope.todoText = '';
  };
}