お世話になります。
以下のようなcoffeesciptを作成したとします。
ここではテキストフィールド内でreturnキーを押した時に入力した値をアラートすることを望んでいます。
class @TestClass constructor: () -> @bind() bind: () -> # リターンキー(13)が押されたら名前をアラート $('.name').on 'keyup', (e) -> if e.which == 13 @alertName alertName: () -> name = $('.name').val() alert(name) $('.name').val('') $ -> window.testClass = new TestClass()
コンパイルし、HTMLに組み込んだのが以下になります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>TestClass</title> <meta name="description" content=""> <meta name="keywords" content=""> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script type="text/javascript"> this.TestClass = (function() { function TestClass() { this.bind(); } TestClass.prototype.bind = function() { return $('.name').on('keyup', function(e) { if (e.which === 13) { return this.alertName; } }); $('.name').on('keyup', this.alertName); }; TestClass.prototype.alertName = function() { var name; name = $('.name').val(); console.log(name); alert(name); return $('.name').val(''); }; return TestClass; })(); $(function() { return window.testClass = new TestClass(); }); </script> </head> <body> <main> <h1>名前アラート</h1> <form onSubmit="return false;" class="meassge-input"> <input type="text" class="name" placeholder="リターンキーで入力した名前をアラートします"> <button name="button" type="button" class="say"> SAY! </button> </form> </main> </body> </html>
しかし、Enterを押しても動作しません。
bind関数の中身をreturn $('.name').on('keyup', this.alertName);
($('.name').on 'keyup', @alertName
)とすれば望んだ動作ではありませんが、@alertName
を期待通り呼べています。
となると、@alertName
が呼べていないということになりそうです。
@
は常にインスタンスを指すと思っていたのですが、そうではないのでしょうか?
リターンキー(13)が押されたら、インスタンス関数を発火させるにはどうすれば良いでしょうか?
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/04/02 09:36
2016/04/02 09:37
2016/04/02 09:55
2016/04/02 09:59