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

元フリーエンジニアライフ

Ruby on Rails とか MovableType とかAWSやってるフリーランスウェブエンジニアの記録でした。現在は法人成りしてIT社長。

Knockoutjsチュートリアルを消化

http://learn.knockoutjs.com/

英語よくわからないけどいじってます。メモ。英語あんまり読めないため雰囲気で解釈してるから、誤解もあるかも。

Introduction

Working with Lists and Collections

Single page applications

Creating custom bindings

data-bind="バインディング1: 値2, バインディング2: 値2" のように指定するやつ。

独自のバインディングを作ることで、だいたい以下のようなことが自由になるっぽい。

  • ビューモデルの変更や初期化時にビューのDOMを更新
    • DOM構造をいじったり
    • jQuery UIなど他のライブラリを適用したり
    • initで初期化時、updateでビューモデルに変更があったときの処理を書く
  • ビューのDOMイベントでビューモデルのプロパティを更新
    • クリックで値を変更したり

ちなみにバインディングする値は式を指定することもできる。

data-bind="jqButton: {enable: pointsUsed() <= pointsBudget}"

ko.bindingHandlers.jqButton = {
    init: function(element){
        $(element).button();
    },
    update: function(element, valueAccessor){
        var currentValue = valueAccessor();  // その時点の {enable: pointsUsed() <= pointsBudget} を得る?
        $(element).button('option', 'disabled', currentValue.enable == false);
    }
};

Loading and saving data

jQueryAjaxメソッドを組み合わせたサンプル。 データの利用にKnockout.js独特のルールを覚える必要があまりなく、わかりやすく感じた。

データの読み込み後の ko.applyBindings はしないことぐらい。

ko.observableArraydestroyメソッドでで_destroyプロパティがセットされるのはRails使い的にニンマリ。