読者です 読者をやめる 読者になる 読者になる

牌語備忘録 -pygo

あくまでもメモです。なるべくオフィシャルの情報を参照してください。

牌語備忘録 -pygo

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

Javascript AngularJS

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


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

Knockout.js

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

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 = '';
  };
}


*1:20120822若干修正

*2:20120822若干修正