Backbone.js- 모델(Ajax)
8256 단어 JavaScriptBackbone.js
개요
Backbone.js 모형을 시험적으로 사용하다
지방 환경 정비
docker로nginx를 시작해서 환경을 조정합니다.
단말기$ docker-compose build
$ docker-compose up -d
※ 배우기 위해 만든 코드가 github에 업로드됨
https://github.com/reflet/sample-backbone.js
AJAX 통신 준비
Ajax 비동기 통신을 통해 모드 처리 데이터를 얻기 위해 json 파일을 준비합니다.
./src/html/api/user/1.json{"country": "日本", "prefecture": "東京都", "name": "太郎", "age": "30"}
샘플 코드
Ajax로 동적으로 데이터를 얻는 모델을 만들어 보았다.
※ 데이터 획득 위치: GET http://localhost:8080/api/user/1.json./src/html/model1.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Backbone.js学習 [Model]</title>
</head>
<body>
<h1>Model</h1>
<p>Modelで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>
const Person = Backbone.Model.extend({
urlRoot: '/api/user',
url: function () {
var url = Backbone.Model.prototype.url.apply(this);
return (this.isNew()) ? url : url + '.json';
},
parse: function (response) {
response.datetime = new Date(response.datetime);
return response;
}
});
var user = new Person({id: 1});
console.log(user.url()); // /api/user/1.json
// Ajax通信でデータを取得する
// ※ GET /api/user/1.json
user.fetch()
.done(function(user){
console.log(user);
});
// Ajax通信でデータを取得する ← GETパラメータを追加してみる
// ※ GET /api/user/1.json?limit=5&offset=0
user.fetch({data:{limit: 5, offset: 0}})
.done(function(user){
console.log(user);
});
</script>
</body>
</html>
동작 확인
정상적으로 데이터를 얻은 것 같습니다.
총결산
Ajax가 통신할 때 URL에 자동으로 ID를 추가할 수 있습니다.
그러나 요청 확장자.json의 URL에 추가하려고 해도 찾을 수 없습니다...
그래서 백bone.js의 URL을 참조하는 프로그램을 덮어쓰는 형식으로 써 보십시오.
사이트 축소판 그림
$ docker-compose build
$ docker-compose up -d
{"country": "日本", "prefecture": "東京都", "name": "太郎", "age": "30"}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Backbone.js学習 [Model]</title>
</head>
<body>
<h1>Model</h1>
<p>Modelで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>
const Person = Backbone.Model.extend({
urlRoot: '/api/user',
url: function () {
var url = Backbone.Model.prototype.url.apply(this);
return (this.isNew()) ? url : url + '.json';
},
parse: function (response) {
response.datetime = new Date(response.datetime);
return response;
}
});
var user = new Person({id: 1});
console.log(user.url()); // /api/user/1.json
// Ajax通信でデータを取得する
// ※ GET /api/user/1.json
user.fetch()
.done(function(user){
console.log(user);
});
// Ajax通信でデータを取得する ← GETパラメータを追加してみる
// ※ GET /api/user/1.json?limit=5&offset=0
user.fetch({data:{limit: 5, offset: 0}})
.done(function(user){
console.log(user);
});
</script>
</body>
</html>
Reference
이 문제에 관하여(Backbone.js- 모델(Ajax)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/reflet/items/38d63bc829aff16b2335텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
