Backbone.UndoをTypescriptで使ってみた その3

昨日のサンプルは、クリックイベントの処理がモデルの中に入っているので、ちょっとイマイチだったので、コントローラ側でその辺りの処理をするように再度修正してみました。また、ArrayなどのUndoに対応できる用にコントローラ側でデータ修正する際に、深いコピーでモデルに入れるようにしないといけないのでその辺りも合わせて修正しました。

  • app.ts

  • index.html

次に単体テストをmochaを使用して記述してみます。

予めmocha.js,mocha.d.ts,mocha.css,asert.js,assert.d.tsを用意しておく必要があります。

書いていてわかったのですが、実はBackbone.undo.jsはデータをスタックする際にタイムスタンプを用いているらしいので、テストユニットでババっと流すと、同じタイムスタンプでスタックされてしまい、思い通りの動きになりません。

そこで、テストユニットにはsettimeoutで少し実行間隔を開けてやることにします。

  • app-test.ts

done()を入れることにより、同期をとったテストを実行できます

  • app-test.html

本来ならば、gruntとphantom.jsを用いてコマンドラインから実行するのが普通でしょうが、このapp-test.htmlをブラウザで開くだけでもテストを実行できます。エラーなどはchromeのデバッグツールで確認して下さい

サンプルはこちらにアップしておきました

https://github.com/anagotan/typescript_sample/tree/master/undo

Backbone.UndoをTypescriptで使ってみた その2

前回のサンプルではModelとView辺がうまく分離できていなかったので修正してみた

Backbone.Modelに状態を保存し、イベントを拾って、Undoなどの処理を行うようにしてみた

  • app.ts

  • index.html

AppModelクラスが状態を保存している。このBackboneModelに対し、各マウスイベントで発生したClickイベントの関数からModelに対し値をセット。Backboneのchangeイベントが発生するのでそれを拾って処理を行う感じ

Backboneをこのように使うのかどうかは不明。。自己流です

Backbone.UndoをTypescriptで使ってみた

backbone.undo.jsというBackboneJS用のUNDOモジュールが有ります。

http://backbone.undojs.com/

こちらをTypescriptで使用してみました。うまくいったのでサンプルを掲載しておきます

通常、Typescriptで既存のライブラリを使用する際には、Typescript用に型定義ファイルを作成してやる必要が有ります。

世の中にはいい人がいて、たいていのライブラリは型定義されていたりします。

https://github.com/borisyankov/DefinitelyTyped

しかし、今回使用するbackbone.undo.jsはまだこちらでは定義されていませんでしたので、適当に作成してみました。

https://github.com/anagotan/DefinitelyTyped/tree/master/backbone.undo

これを利用してUndo機能を実装してみます。

仕様としては、addボタンを押すと「name=0,value=0」のボタンが追加されていきます。update_nameおよびupdate_valueのボタンでランダムな数値に置き換わります。

これをもとにundoおよびredoを実装してみました。

  • index.html

  • app.ts

実行する際には別途,jquery,underscore.js,backbone.js を用意しておく必要が有ります

javascriptでサブドメインの異なるサイトでクッキーの共有

こちらの記事を参考にJavascriptでサブドメインの異なるサイト間でクッキーの恭有してみました。

http://d.hatena.ne.jp/dirablue/20090506/1241607961

http://www1.example.com/setCookie.html

  • setCookie.html

http://www2.example.com/getCookie.html

  • getCookie.html

ポイントはHTMLを設置するパスを同じにすることとdomain指定の前にドットをつけることでしょうか?

あとIDやパスワードをクッキーに保存してはいけません^^);

JavaScriptでコールバック関数に引数をとりAjaxでデータを取得してみる

JavaScriptでコールバック関数の実装ですが、いろいろなところで書かれているのですがちょっとよくわからなかったので試してみました。

a.html

これで

と表示されます。

ここでjQueryを使ってAjaxでデータを取得してみます。

b.txt

これを用意しておきhttpで取得してみます

うまくとれましたが、これでいいのかどうか。