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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Backbone.js

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

JavaScript

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

Q&A

解決済

1回答

1830閲覧

backbone.jsの挙動について

imamoto_browser

総合スコア1161

Backbone.js

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

JavaScript

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

0グッド

0クリップ

投稿2017/12/20 10:06

編集2017/12/20 10:39

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を使ったイベント処理が何も実行できていない状態です。

##やってみたこと

javascript

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

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

##追記

html

1echo '<input class="hello-button" style="WIDTH: 70px; type="button" value="more info" name="detailCashing">'; 2

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s8_chu

2017/12/20 10:28

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

2017/12/20 10:37

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

2017/12/20 10:40

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

2017/12/20 10:40

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

回答1

0

ベストアンサー

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

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6</head> 7<body> 8<input class="hello-button" style="WIDTH: 70px;" type="button" value="more info" name="detailCashing"> 9<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 10<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 11<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script> 12<script> 13 var User = Backbone.Model.extend({ 14 defaults: { 15 id: "", 16 name: "", 17 }, 18 initialize: function (firstInitialize) { 19 console.log("model initialized"); 20 } 21 }); 22 23 var Task = Backbone.Model.extend({ 24 defaults: { 25 url: '/api/hoge', 26 title: "do something!", 27 completed: false 28 }, 29 30 initialize: function () { 31 this.on('initialize', this.setRegisterDate); 32 this.trigger('initialize'); 33 }, 34 setRegisterDate: function () { 35 this.set('registerDate', new Date()); 36 }, 37 toggle: function () { 38 this.set('completed', !this.get('completed')); 39 } 40 41 }); 42 43 var task = new Task(); 44 45 var TaskView = Backbone.View.extend({ 46 template: _.template("<%- title %>"), 47 events: { 48 "click .squre_btn": "onAdd", 49 "click .hello-button": "hello" 50 }, 51 initialize: function () { 52 $('.hello-button').click(this.hello); // 修正 53 this.listenTo(this.collection, 'change', function (model) { 54 console.log('collection catch ' + model.get('name') + ' model change event'); 55 }); 56 57 }, 58 hello: function () { 59 alert("hello!"); 60 $("body").append("<p>テキスト</p>"); // 追記 61 }, 62 render: function () { 63 var template = this.template(this.model.toJSON()); 64 this.$el.html(template); 65 return this; 66 }, 67 }); 68 var taskView = new TaskView({model: task}); 69</script> 70</body> 71</html>

投稿2017/12/20 10:46

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

imamoto_browser

2017/12/20 11:27

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問