質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.24%

  • JavaScript

    11813questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Backbone.js

    46questions

    Backbone.jsはRESTfulなウェブアプリケーションを構築するJavaScriptフレームワークです。

backbone.jsの挙動について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 48

imamoto_browser

score 963

backbone.jsの学習を進めています。

ボタンを押すと、テキストをappendするという処理を作りたいのですが、
下記のようにapp.jsに記述すると、

Uncaught ReferenceError: hello is not defined

とエラーになってしまいます。どのように書けば、helloメソッドを読んでくれるでしょうか。なお、backbone.jsのバージョンは最新のものを使っています。(1.3.3)

 発生している問題

やってみたことに書いてあるソースコードを実行すると、下記のようなエラーとなる。

Uncaught ReferenceError: hello is not defined

なので、backbone.jsを使ったイベント処理が何も実行できていない状態です。

やってみたこと

  1 (function() {
  2 
  3 var User = Backbone.Model.extend({
  4         defaults:{
  5                 id: "",
  6                 name : "",
  7         },
  8         initialize:function(firstInitialize){
  9                 console.log("model initialized");
 10         }       
 11 });
 12 
 13 var Task = Backbone.Model.extend({
 14         defaults: {
 15                 url:  '/api/hoge',
 16                 title: "do something!",
 17                 completed: false
 18         },
 19 
 20         initialize: function(){
 21                 this.on('initialize', this.setRegisterDate);
 22                 this.trigger('initialize');
 23         },
 24         setRegisterDate: function(){
 25         this.set('registerDate', new Date());
 26         },
 27         toggle: function() {
 28                 this.set('completed', !this.get('completed'));
 29         }       
 30 
 31 });
 32 
 33 var task = new Task();
 34 
 35 var TaskView = Backbone.View.extend({
 36         template: _.template("<%- title %>"),
 37         
 38         events:{
 39           "click  .squre_btn":"onAdd",
 40           "click .hello-button": "hello"
 41         },
 42         initialize: function() {
 43                 
 44                 $('.hello-button').click(hello);
 45                 this.listenTo(this.collection, 'change', function(model) {
 46                         console.log('collection catch ' + model.get('name') + ' model change event');
 47                 });     
 48 
 49         },
 50         hello: function() {
 51                 alert("hello!");
 52         },      
 53         render:  function() {
 54                 var template = this.template(this.model.toJSON() );
 55                 this.$el.html(template);
 56                 return this;
 57         },   
 58 });
 59 var taskView = new TaskView({ model: task });

補足

なお、underscore.jsやbackbone.jsは正常に読み込めており、modelに記載したプロパティはView側から取得してconsole.logで出力されるのを確認済みです。

追記

echo '<input class="hello-button" style="WIDTH: 70px; type="button" value="more info" name="detailCashing">';
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • s8_chu

    2017/12/20 19:28

    HTMLを追記していただけませんか?

    キャンセル

  • imamoto_browser

    2017/12/20 19:37

    HTMLの抜粋を追記しました。よろしくお願いします。なお、cakephp2.6を使っておりますので、厳密にはctpファイルです。

    キャンセル

  • s8_chu

    2017/12/20 19:40

    編集日時から、追記が行えていないようですが、いかがでしょうか?

    キャンセル

  • imamoto_browser

    2017/12/20 19:40

    さきほど追記しました。お願いします。

    キャンセル

回答 1

checkベストアンサー

+1

質問者さんが実現したいことは以下のように行えると思いますが、いかがでしょうか?また、style属性のダブルクォートの対応が取れていませんので、修正しておいたほうが良いと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
</head>
<body>
<input class="hello-button" style="WIDTH: 70px;" type="button" value="more info" name="detailCashing">
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script>
    var User = Backbone.Model.extend({
        defaults: {
            id: "",
            name: "",
        },
        initialize: function (firstInitialize) {
            console.log("model initialized");
        }
    });

    var Task = Backbone.Model.extend({
        defaults: {
            url: '/api/hoge',
            title: "do something!",
            completed: false
        },

        initialize: function () {
            this.on('initialize', this.setRegisterDate);
            this.trigger('initialize');
        },
        setRegisterDate: function () {
            this.set('registerDate', new Date());
        },
        toggle: function () {
            this.set('completed', !this.get('completed'));
        }

    });

    var task = new Task();

    var TaskView = Backbone.View.extend({
        template: _.template("<%- title %>"),
        events: {
            "click  .squre_btn": "onAdd",
            "click .hello-button": "hello"
        },
        initialize: function () {
            $('.hello-button').click(this.hello); // 修正
            this.listenTo(this.collection, 'change', function (model) {
                console.log('collection catch ' + model.get('name') + ' model change event');
            });

        },
        hello: function () {
            alert("hello!");
            $("body").append("<p>テキスト</p>"); // 追記
        },
        render: function () {
            var template = this.template(this.model.toJSON());
            this.$el.html(template);
            return this;
        },
    });
    var taskView = new TaskView({model: task});
</script>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/20 20:27

    回答ありがとうございます。素のphpだと思惑通り動くのですが、cakephp側だと動いてくれませんでした。切り分けのため、app.jsを別にhtmlを用意して動かした所、正常に動きましたので、ctpファイルに問題がありそうです。
     他にもrequire.jsやpreload.jsなどいろいろ入っており、相性が悪いのかとか切り分けが必要そうなので、いったんこの質問はクローズいたします。

    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.24%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11813questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Backbone.js

    46questions

    Backbone.jsはRESTfulなウェブアプリケーションを構築するJavaScriptフレームワークです。