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

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

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

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1365閲覧

Backbone.jsにおけるHTTPファイルとJSファイルの連携の仕方が分からない

orange377

総合スコア17

Backbone.js

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/11/09 09:00

JavaScript初心者です。(1週間未満)

現在既存のソースにAce Editorを組み込もうとしております。(最小構成)
参考:https://qiita.com/naga3/items/1bc268243f2e8a6514e5

しかしJSにBackbone.jsが使われているため、
参考元のようにHTTPに<Script>を書くことなく済ませたいのですが、
どこにJSを記述すれば良いか分かりません。

試したこと

表示させたいHTMLに対応する.jsファイルに以下のように記述してみましたがダメでした。

Javascript

1const Backbone = require('backbone'); 2const _ = require('lodash'); 3const Ace = require('ace-min-noconflict'); 4・・・ 5 6const hoge = Backbone.View.extends{ 7 ・・・ 8 initialize(ooptions){ 9 ・・・ 10 const editor = ace.edit(this.$('#editor')); 11 editor.setValue("Hello World", -1); 12 ・・・ 13 } 14}

初歩的な質問かと思いますが、
お力を借して頂けると幸いです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

ace.edit(this.$('#editor'))ace.edit(this.$('#editor').get(0))にすると行けると思います。(他のところに間違いがなければ)

ace.editにはDOMElementを渡すことになっているようです。(参考
Backbone.Viewthis.$()から得られるのはjQueryオブジェクトのはずですから、.get()を使ってDOM要素を取り出す必要があります。

確認

js

1const Backbone = require('backbone'); 2const _ = require('lodash'); 3const Ace = require('ace-min-noconflict'); 4 5const hoge = Backbone.View.extend({ 6 initialize(options){ 7 this.$el.append("<div id=\"editor\">"); 8 this.$('#editor').height("30em"); 9 const editor = ace.edit(this.$('#editor').get(0)); 10 editor.setValue("Hello World", -1); 11 } 12}); 13 14const fuga = new hoge; 15document.body.appendChild(fuga.el);

上記のコードをtest.jsとして保存し、

bash

1$ browserify test.js -o t.js

この出力のt.jsを以下のHTMLファイルと同じ場所において表示したところ、エディタが表示されました。

html

1<!DOCTYPE html> 2<meta charset="utf-8"> 3<title>タイトル</title> 4<body> 5<script src="t.js"></script> 6</body>

投稿2017/11/10 12:34

miimou

総合スコア74

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

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

orange377

2017/11/14 01:01

回答ありがとうざいます。Javascriptについて理解が少し深まりました。 ですがなぜか私の環境では上手くいかず・・・ もう少し原因を探って再度質問させていただこうと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問