Backbone.앨범 모음집
10094 단어 JavaScriptBackbone.js
개요
Collection으로 임의의 목록을 만들어서 조작해 보세요
로컬 환경 준비
docker로nginx를 시작해서 환경을 조정합니다.
단말기$ docker-compose build
$ docker-compose up -d
※ 배우기 위해 만든 코드가 github에 업로드됨
https://github.com/reflet/sample-backbone.js
샘플 코드
Ajax 통신 등을 하지 않고 목록을 임의로 생성하고 제어합니다.
./src/html/collection2.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Backbone.js学習 [Collection]</title>
</head>
<body>
<h1>Collection</h1>
<p>Collectionを使ってみる</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});
const users = new Users();
users.add({name:'次郎', age:28});
users.add({name:'花子', age:25, prefecture:'大阪'});
users.add({name:'三郎', age:32});
users.add({name:'田中', age:25, prefecture:'名古屋'});
console.log('dump1', users.toJSON());
// 名前だけ取得する
console.log(users.pluck('name'));
// 全件取得する
users.each(function(user) {
console.log(user.toJSON());
});
// 年齢が25歳のユーザーのみ取得する
$.each(users.where({age:25}), function(e,user) {
console.log(user.toJSON());
});
// 最後のデータ要素を削除する
users.pop();
console.log('dump2', users.toJSON());
// 指定した要素を削除する
users.remove(users.at(1)); // 2番目
console.log('dump3', users.toJSON());
//すべてのデータを削除する
users.reset();
console.log('dump4', users.toJSON());
</script>
</body>
</html>
동작 확인
정상적으로 처리된 것 같습니다.
총결산
하나의 데이터는 모델로 처리되어 데이터의 집합으로서 콜렉션과 같은 느낌을 준다
비교적 간단한 구성은 이해하기 쉽다.
사이트 축소판 그림
$ docker-compose build
$ docker-compose up -d
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Backbone.js学習 [Collection]</title>
</head>
<body>
<h1>Collection</h1>
<p>Collectionを使ってみる</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});
const users = new Users();
users.add({name:'次郎', age:28});
users.add({name:'花子', age:25, prefecture:'大阪'});
users.add({name:'三郎', age:32});
users.add({name:'田中', age:25, prefecture:'名古屋'});
console.log('dump1', users.toJSON());
// 名前だけ取得する
console.log(users.pluck('name'));
// 全件取得する
users.each(function(user) {
console.log(user.toJSON());
});
// 年齢が25歳のユーザーのみ取得する
$.each(users.where({age:25}), function(e,user) {
console.log(user.toJSON());
});
// 最後のデータ要素を削除する
users.pop();
console.log('dump2', users.toJSON());
// 指定した要素を削除する
users.remove(users.at(1)); // 2番目
console.log('dump3', users.toJSON());
//すべてのデータを削除する
users.reset();
console.log('dump4', users.toJSON());
</script>
</body>
</html>
Reference
이 문제에 관하여(Backbone.앨범 모음집), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/reflet/items/f3475ffa4faccec4bba9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
