backbone.js-환경 준비
5746 단어 JavaScriptBackbone.js
개요
평소에js 등을 사용하지만 백bone.js를 써 봤기 때문에 공부를 해 봤어요.
지방 환경 정비
docker로nginx를 시작해서 환경을 조정합니다.
단말기$ docker-compose build
$ docker-compose up -d
※ 배우기 위해 만든 코드가 github에 업로드됨
https://github.com/reflet/sample-backbone.js
샘플 코드
우선, 필요한 js를 읽고 작동을 시도해 보겠습니다.
./src/html/index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Backbone.js学習</title>
</head>
<body>
<h1>TOP Page</h1>
<p>ひとまず動く環境を整えてみる。</p>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/backbone.min.js"></script>
<script>
const Person = Backbone.Model.extend({
defaults: {
country: '日本',
prefecture: '東京',
},
hello: function() {
console.log('こんにちは、' + this.get('name') + 'さん');
}
});
const user = new Person({name: '太郎', age: 30});
// データ確認
console.log(user.toJSON()); // {country: "日本", prefecture: "東京", name: "太郎", age: 30}
// 名前を取得する
console.log(user.get('name'));
// 独自定義した関数を実行してみる
user.hello();
</script>
</body>
</html>
동작 확인
정상적으로 처리되어 콘솔에 결과가 표시됩니다.
총결산
underscore.min.js,jquery.min.js,읽기backbone.min.js하면 사용할 수 있는 점은vue입니다.js처럼 간단해서 도입 원가가 낮은 것 같아요.
사이트 축소판 그림
$ docker-compose build
$ docker-compose up -d
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Backbone.js学習</title>
</head>
<body>
<h1>TOP Page</h1>
<p>ひとまず動く環境を整えてみる。</p>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/backbone.min.js"></script>
<script>
const Person = Backbone.Model.extend({
defaults: {
country: '日本',
prefecture: '東京',
},
hello: function() {
console.log('こんにちは、' + this.get('name') + 'さん');
}
});
const user = new Person({name: '太郎', age: 30});
// データ確認
console.log(user.toJSON()); // {country: "日本", prefecture: "東京", name: "太郎", age: 30}
// 名前を取得する
console.log(user.get('name'));
// 独自定義した関数を実行してみる
user.hello();
</script>
</body>
</html>
Reference
이 문제에 관하여(backbone.js-환경 준비), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/reflet/items/c0ba4b7fd203876b956f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
