집 > 기사 > 웹 프론트엔드 > Backbone.js Framework의 Model과 Collection 활용예_기본지식

Backbone.js Framework의 Model과 Collection 활용예_기본지식

WBOY원래의: 2016-05-16 15:01:351751검색

모델
백본에 있어서 가장 기본적인 것은 모델입니다. 이것은 백엔드 개발의 데이터베이스 매핑 모델이기도 하며, 백엔드와 동일한 속성을 가져야 합니다. (프론트 엔드를 통해 조작해야 하는 속성만)
백본 모델이 무엇인지 이해하기 위해 예제를 단계별로 살펴보겠습니다.
먼저 HTML 페이지를 정의하세요:

<!DOCTYPE html>
<html>
<head>
<title>the5fire-backbone-model</title>
</head>
<body>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script>
(function ($) {
/**
 *此处填充代码
 **/
})(jQuery);
</script>
</html>

이 HTML의 스크립트 태그에 있는 함수에 다음 코드를 채워야 합니다.

1. 가장 간단한 객체

Man = Backbone.Model.extend({
    initialize: function(){
      alert('Hey, you create me!');
    }
  });
var man = new Man;

이것은 매우 간단합니다. helloworld에도 모델 표시가 있으며 여기에는 초기화 중 생성자라는 메서드가 있습니다.

2. 객체 할당의 두 가지 방법
첫 번째 방법은 직접 정의하고 기본값을 설정하는 것입니다.

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
  },
  defaults: {
    name:'张三',
    age: '38'
  }
});

var man = new Man;
alert(man.get('name'));

두 번째 유형은
할당 시 정의됩니다.

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
  }
});
man.set({name:'the5fire',age:'10'});
alert(man.get('name'));

Get은 값을 가져올 때 사용됩니다.

3. 객체의 메소드

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  aboutMe: function(){
    return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  }
});
var man = new Man;
alert(man.aboutMe());

4. 객체 속성 변경 모니터링

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
    //初始化时绑定监听
    this.bind("change:name",function(){
      var name = this.get("name");
      alert("你改变了name属性为：" + name);
    });
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  aboutMe: function(){
    return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  }
});
var man = new Man;
man.set({name:'the5fire'}) //触发绑定的change事件，alert。

5. 개체에 대한 유효성 검사 규칙 및 오류 프롬프트를 추가합니다.

Man = Backbone.Model.extend({
  initialize: function(){
    alert('Hey, you create me!');
    //初始化时绑定监听
    this.bind("change:name",function(){
      var name = this.get("name");
      alert("你改变了name属性为：" + name);
    });
    this.bind("error",function(model,error){
      alert(error);
    });
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  validate:function(attributes){
    if(attributes.name == '') {
      return "name不能为空！";
    }
  },
  aboutMe: function(){
    return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  }
});
var man = new Man;
man.set({name:''}); //根据验证规则，弹出错误提示。

6. 객체 획득 및 저장에는 테스트를 위한 서버측 지원이 필요합니다.
먼저 객체에 대한 url 속성을 정의해야 합니다. save 메소드가 호출되면 객체의 모든 속성이 서버에 게시됩니다.

Man = Backbone.Model.extend({
  url:'/save/',
  initialize: function(){
    alert('Hey, you create me!');
    //初始化时绑定监听
    this.bind("change:name",function(){
      var name = this.get("name");
      alert("你改变了name属性为：" + name);
    });
    this.bind("error",function(model,error){
      alert(error);
    });
  },
  defaults: {
    name:'张三',
    age: '38'
  },
  validate:function(attributes){
    if(attributes.name == '') {
      return "name不能为空！";
    }
  },
  aboutMe: function(){
    return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  }
});
var man = new Man;;
man.set({name:'the5fire'});
man.save(); //会发送POST到模型对应的url，数据格式为json{"name":"the5fire","age":38}
//然后接着就是从服务器端获取数据使用方法fetch([options])
var man1 = new Man;
//第一种情况，如果直接使用fetch方法，那么他会发送get请求到你model的url中，
  //你在服务器端可以通过判断是get还是post来进行对应的操作。
man1.fetch();
//第二种情况，在fetch中加入参数，如下：
man1.fetch({url:'/getmans/'});
  //这样，就会发送get请求到/getmans/这个url中，
  //服务器返回的结果样式应该是对应的json格式数据，同save时POST过去的格式。

//不过接受服务器端返回的数据方法是这样的：
man1.fetch({url:'/getmans/',success:function(model,response){
    alert('success');
    //model为获取到的数据
    alert(model.get('name'));
  },error:function(){
    //当返回格式不正确或者是非json数据时，会执行此方法
    alert('error');
  }});

참고: 위 코드는 정상적으로 실행될 수 있는 코드일 뿐이지만, 나중에 서버 측에서 예시가 나올 예정입니다.
여기에 한 가지 더 추가할 점은 서버의 모든 비동기 작업은 Backbone.sync 메서드를 통해 완료된다는 점입니다. 이 메서드가 호출되면 매개변수가 자동으로 전달되고 해당 매개변수를 기반으로 해당 요청이 서버로 전송됩니다. 예를 들어, 저장하면 Backbone은 객체가 새로운지 여부를 결정합니다. 새로 생성된 경우 매개변수는 create입니다. 변경된 객체인 경우 매개변수는 update입니다. 메서드를 사용하면 매개변수가 읽혀지고, 삭제되면 매개변수가 삭제됩니다. CRUD("create", "read", "update" 또는 "delete")라고도 하며 이 네 가지 매개변수에 해당하는 요청 유형은 POST, GET, PUT 및 DELETE입니다. 이 요청 유형을 기반으로 서버에서 해당 CRUD 작업을 수행할 수 있습니다.

참고:
url 및 urlRoot와 관련하여 url을 설정하면 CRUD가 해당 요청을 이 url로 보내지만 또 다른 문제는 삭제 요청이 전송되지만 데이터가 전송되지 않는다는 것입니다. 그러면 서버는 알 수 없습니다. 어떤 객체(레코드)를 삭제해야 하는지, 그래서 여기에 urlRoot의 또 다른 개념이 있습니다. urlRoot를 설정한 후 PUT 및 DELETE 요청을 보낼 때 요청된 URL 주소는 /baseurl/[model.id ]이므로 업데이트할 수 있습니다. 또는 URL 뒤의 값을 추출하여 서버 측에서 해당 개체(레코드)를 삭제합니다.

컬렉션
컬렉션은 모델 객체의 정렬된 컬렉션입니다. 몇 가지 예를 살펴보면 개념이 매우 간단하다는 것을 알 수 있습니다.
1. 책과 책장의 예시

Book = Backbone.Model.extend({

defaults : {  // 感谢网友蓝色动力指正改为defaults

title:'default'

},

initialize: function(){

//alert('Hey, you create me!');

}

});

BookShelf = Backbone.Collection.extend({

model : Book

});

var book1 = new Book({title : 'book1'});

var book2 = new Book({title : 'book2'});

var book3 = new Book({title : 'book3'});

//var bookShelf = new BookShelf([book1, book2, book3]); //注意这里面是数组,或者使用add

var bookShelf = new BookShelf;

bookShelf.add(book1);

bookShelf.add(book2);

bookShelf.add(book3);

bookShelf.remove(book3);



//基于underscore这个js库，还可以使用each的方法获取collection中的数据

bookShelf.each(function(book){

alert(book.get('title'));

});

설명이 필요 없을 정도로 간단합니다
2. 가져오기를 사용하여 서버에서 데이터를 가져옵니다
먼저 위의 Bookshelf에서 URL을 정의합니다. 컬렉션에는 urlRoot 속성이 없습니다. 또는 다음과 같이 fetch 메소드에서 직접 url 값을 정의합니다.

bookShelf.fetch({url:'/getbooks/',success:function(collection,response){

collection.each(function(book){

alert(book.get('title'));

});

},error:function(){

alert('error');

}});

또한 반환 값을 허용하는 두 가지 메서드를 정의합니다. 구체적인 의미는 이해하기 쉽다고 생각합니다. 올바른 형식의 데이터가 반환되면 성공 메서드가 호출됩니다. 물론 오류 메소드도 호출됩니다. 성공 메소드와 동일한 형식 매개변수를 추가합니다.
BookShelf의 해당 반환 형식은 다음과 같습니다: [{'title':'book1'},{'title':'book2'}....]
3. 재설정 방법
이 메서드는 위의 가져오기와 조정되어야 합니다. 컬렉션이 데이터를 가져온 후 재설정 메서드를 호출하므로 컬렉션에 재설정 메서드를 정의하거나 재설정 메서드를 바인딩해야 합니다. 바인딩을 사용한 데모는 다음과 같습니다.

bookShelf.bind('reset',showAllBooks);

showAllBooks = function(){

bookShelf.each(function(book){

  &#8203;//将book数据渲染到页面。

});

}

가져오기 전에 바인딩 단계를 수행해야 합니다.
수집을 위한 전체 코드는 다음과 같습니다. 이를 위해서는 서버 측 지원이 필요합니다. 서버 측 구성은 나중에 작성됩니다.

<!DOCTYPE html>
<html>
<head>
  <title>the5fire-backbone-collection</title>
</head>
<body>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script>
(function ($) {
  //collection是一个简单的models的有序集合
  //1、一个简单的例子

  Book = Backbone.Model.extend({
    defaults : {  // 感谢网友蓝色动力指正改为defaults
      title:'default'
    },
    initialize: function(){
      //alert('Hey, you create me!');
    }
  });
  BookShelf = Backbone.Collection.extend({
    model : Book
  });

  var book1 = new Book({title : 'book1'});
  var book2 = new Book({title : 'book2'});
  var book3 = new Book({title : 'book3'});

  //var bookShelf = new BookShelf([book1, book2, book3]); //注意这里面是数组,或者使用add
  var bookShelf = new BookShelf;
  bookShelf.add(book1);
  bookShelf.add(book2);
  bookShelf.add(book3);
  bookShelf.remove(book3);
  /*
  for(var i=0; i<bookShelf.models.length; i++) {
    alert(bookShelf.models[i].get('title'));
  }
  */
  //基于underscore这个js库，还可以使用each的方法获取collection中的数据
  bookShelf.each(function(book){
    alert(book.get('title'));
  });

  //2、使用fetch从服务器端获取数据,使用reset渲染
  bookShelf.bind('reset', showAllBooks);
  bookShelf.fetch({url:'/getbooks/',success:function(collection,response){
    collection.each(function(book){
      alert(book.get('title'));
    });
  },error:function(){
    alert('error');
  }});
  showAllBooks = function(){
    bookShelf.each(function(book){
      &#8203;//将book数据渲染到页面。
    });
  }
  //上述代码仅仅均为可正常执行的代码，不过关于服务器端的实例在后面会有。
})(jQuery);
</script>
</html>

성명：

이전 기사：jQuery 바인딩 events_jquery의 여러 구현 방법다음 기사：jQuery 바인딩 events_jquery의 여러 구현 방법

Backbone.js Framework의 Model과 Collection 활용예_기본지식

관련 기사