Backbone.js- 모음(Ajax)
10035 단어 Backbone.jsJavaScript
개요
Backbone.js의 모음집에서 Ajax 통신을 하고 목록을 동적으로 가져옵니다.
지방 환경 정비
docker로nginx를 시작해서 환경을 조정합니다.
단말기$ docker-compose build
$ docker-compose up -d
※ 배우기 위해 만든 코드가 github에 업로드됨
https://github.com/reflet/sample-backbone.js
Ajax 통신 준비
Ajax 비동기 통신을 통해 Collection 처리 데이터를 얻기 위해 json 파일을 준비합니다.
./src/html/api/users.json[
{"country": "日本", "prefecture": "東京都", "name": "太郎", "age": "30"},
{"country": "日本", "prefecture": "大阪府", "name": "次郎", "age": "28"},
{"country": "日本", "prefecture": "愛知県", "name": "花子", "age": "25"},
{"country": "日本", "prefecture": "福岡県", "name": "三郎", "age": "15"},
{"country": "日本", "prefecture": "東京都", "name": "四郎", "age": "25"}
]
샘플 코드
Ajax를 통해 동적으로 데이터를 가져오는 Collection을 만들어 보았습니다.
※ 데이터 획득 주소: GEThttp://localhost:8080/api/users.json
./src/html/collection1.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Backbone.js学習 [Collection]</title>
</head>
<body>
<h1>Collection</h1>
<p>CollectionでAjax通信して動的にデータを取得する</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>
// Model
const Person = Backbone.Model.extend({
defaults: {
country: '日本',
prefecture: '東京',
name: '',
age: null,
}
});
// Collection
const Users = Backbone.Collection.extend({
model: Person,
url: '/api/users.json',
parse: function(response){
console.log(response);
return response;
}
});
const users = new Users();
users.fetch().done(function(users){
$.each(users, function(index, user){
console.log(index, user);
});
});
</script>
</body>
</html>
동작 확인
정상적으로 데이터를 얻은 것 같습니다.
사이트 축소판 그림
$ docker-compose build
$ docker-compose up -d
[
{"country": "日本", "prefecture": "東京都", "name": "太郎", "age": "30"},
{"country": "日本", "prefecture": "大阪府", "name": "次郎", "age": "28"},
{"country": "日本", "prefecture": "愛知県", "name": "花子", "age": "25"},
{"country": "日本", "prefecture": "福岡県", "name": "三郎", "age": "15"},
{"country": "日本", "prefecture": "東京都", "name": "四郎", "age": "25"}
]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Backbone.js学習 [Collection]</title>
</head>
<body>
<h1>Collection</h1>
<p>CollectionでAjax通信して動的にデータを取得する</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>
// Model
const Person = Backbone.Model.extend({
defaults: {
country: '日本',
prefecture: '東京',
name: '',
age: null,
}
});
// Collection
const Users = Backbone.Collection.extend({
model: Person,
url: '/api/users.json',
parse: function(response){
console.log(response);
return response;
}
});
const users = new Users();
users.fetch().done(function(users){
$.each(users, function(index, user){
console.log(index, user);
});
});
</script>
</body>
</html>
Reference
이 문제에 관하여(Backbone.js- 모음(Ajax)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/reflet/items/04627ca31bbcf611cba9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
