JavaScript

backbone.js Viewのイベントを実行したターゲットを取得

backbone.jsのviewでeventsに定義したメソッド内で対象の要素を取得するにはtargetを使います。 eventsで定義されたメソッドの中だと「this」はviewそのものを参照するので、console.log($(this).html())とやってもnullが返ってきてしまいます。 正しくイベ…

backbone.js モデルのバリデーション

backbone.jsでモデルのバリデーションを行うにはモデルでvalidateメソッドを実装します。 下のSourceにあるサンプルだと1つのエラーで1つずつAlertを表示するような形でしたが、複数の入力フィールドがあるのでまとめてエラーを出したいと思います。 var MyM…

backbone.js モデル保存後のCallback

Backbone.jsでモデル保存後のcallbackを設定するには、1つ目の引数に保存するプロパティ値を渡して、2番目の引数にsuccessとerrorを渡します。 success、errorはどちらか一方だけでもOKかと思います。 this.model.save( {var1: "test", var2: "hoge"}, { su…

Jasmine+Sinon.jsを使ってAlertが正しいテキストで表示されることを確認する

confirmでも同じように使えました。 // Spec describe("MyAlertTest", function(){ beforeEach(function(){ setFixtures(sandbox()); $("#sandbox").append("<button id='testBtn' value='test' />"); this.alertSpy = sinon.stub(window, "alert").returns(true); }); //これなしだとTypeError: </button>…

IE9でBackboneアプリが動かない

ChromeやFFで問題なく動作していたBackboneアプリがIE9では動かない。。 デバッグツールを立ち上げるとこんなエラーが出ていました。SCRIPT1028: 識別子、文字列または数がありません。 var ItemView = Backbone.View.extend({ render: function(){ $(this.…

Jasmine+sinon.jsでjQuery.ajaxが呼ばれているかテストする

sinon.spyを使うと$.ajaxが呼ばれているかをテストできます。 このときはBackboneのCollectionでfetchが正しいパラメータで呼び出されているかをテストしてみました。 describe("some ajax test", function(){ beforeEach(function(){ this.ajaxSpy = sinon.…

Jasmine+BackboneでViewのテストをするときにダミーのHTML要素を使う

jasmine-jqueryのsandboxを使うと、テストの間だけ使えるDIV要素を作ってくれます。 各テストの間でちゃんと掃除をしてくれるので、わざわざ削除する必要もありません。 beforeEach(function(){ setFixtures(sandbox()); }); sandbox()を使うとdiv要素にidと…

Jasmineで非同期のリクエスト終了後にテストを実行する

今日はJasmineを使ってBackbone.Viewのテストを書いていました。 サンプルに載っていた通り、非同期リクエストでViewのテンプレートを読み込んでいたのですが、テンプレートの読み込みが終了した時点でテストを実行しようとして、うまくいかずにハマりました…

jQuery + Backbone + JasmineでBDD その1

jQuery + Backbone + JasmineでBDDを試してみます。元ネタはこちらのすばらしいブログです。 最初に断っておきますが、私はJasmine初体験でBDD、TDDの知識も本で読みかじった程度です。 ついでに言うと、jQueryもちょろっと触ったことがあるくらいです。なぜ…

テキストボックスに数字のみを入力させる

KeyDownに紐付ける function number_check(e){ // left, right, enter, backspace or numbers if( e.which != 37 && e.which != 39 && e.which != 13 && e.which!=8 && e.which!=0 && (e.which<48 || e.which>57) && (e.which<95 || e.which>106)) return fa…

最初の0を消す

replaceで正規表現を使って最初の0を取り除く。 var value = "005000"; value.replace(/^0+/, ""); alert(value);

classに属しているか

今日はある要素が特定のclassに属しているか知りたいことがあった。 if ($(this).is('.myclass')) { alert("has the class"); }

jqueryで要素のIDを取得する

当たり前かもしれないけど最近まで知らなかった。 $(this)を使うとそのイベントが実行されてる要素を取得できる。 そんでもってそのattributeからidを取得すると。 function showId(event){ alert($(this).attr("id"); // or alert(event.target.id); } $(do…