Backbone入门

1 var Person = Backbone.Model.extend({
2      initialize: function(){
3           alert('Hello world!');
4      }
5 });
6 var person = new Person;

 1  2      initialize: function(){//实例化时会执行这里的代码
 3           alert('Hello world!' 4  5  6 在实例化model时设置
 7 new Person({
 8      name: 'Jack', 9      age: 20
10 11 也可以在model实例化后，通过set方法进行设置
12  Person;
13 person.set({
14      name: 'Elizabeth'15      age: 18
16 17 person.set('age',22);设置单个属性

 3           console.log('Hello world!'     },1)"> 5      aboutMe:  6           return 'I\'m ' + this.get('name') + ',i live in ' + this.get('address').street;
 8  9 10      name: 'Asan'     address: {
12           street: 'Mongo Street'
14 15 console.log(person.aboutMe());
16 console.log(person.get('name'));

 2     defaults: { 设置默认属性
 3         name: 'Kagol Antony'        address: {
 5             street: '1st Street' 6             city: 'Shenzhen' 7             State: 'TX' 8             zipCode: 78701
        }
    },1)">11     initialize: 初始化，首先执行
12         console.log('hello world!')
14     aboutMe: 15             }
17 18 19      name: 'Asan'
20 21 console.log(person.get('name'));Asan
22 console.log(person.get('address').city);Shenzhen

 2     defaults: {
 4         hobby: 'basketball'
 6     initialize:  7         console.log('hello world!' 9     like: (hobbyName){
10         this.set({
             hobby: hobbyName
        });
16 person.like('coding'17 console.log(person.get('hobby'));

 3         name: 'Elizabeth' 4         age: 18
 7         console.log('hello world' 8         this.on('change:name',(model){
 9             var name = model.get('name'10             console.log('Changed my name for ' + name);
        })
 Person ({
15     name: 'Jack'16     age: 20
17 }); 实例化的时候改变name属性不会触发change事件
18 person.set({name: 'Kagol'});触发change事件，输出：'Changed my name for Kagol'
19 console.log(person.hasChanged());true
20 console.log(person.changedAttributes()); Object {name: "Kagol"}

 2     validate: (attributes){
 3         if(attributes.age < 0){
 4             return 'You can\'t be negative years old';
 7     initialize:  8         console.log('hello,world!' 9         this.on('invalid',1)">(model,error){
            console.log(error);
15 person.set({name: 'Mary Poppins',age: -21},{validate: true}); 会验证，输出"You can't be negative years old"
16 person.set({name: 'Mary Poppins',age: 20},1)">不会验证
17 person.set({name: 'Mary Poppins',1)">false});18 person.set({name: 'Mary Poppins',age: -21});不会验证

<script type="text/template" id="search_template">
2     <label>My Search: /label>
3     input type="text idsearch_input4     buttonsearch_button valueSearch</scriptdiv id="search_contailer"></div>

var SearchView = Backbone.View.extend({
 2     initialize: .render();
 5     render:  6         var template = _.template($('#search_template').html(),{});
 7         .$el.html(template);
var search_view =  SearchView({
11     el: $('#search_contailer'12 });

 9     events: {添加事件
10         'click #search_button': 'doSearch'
12     doSearch: 13         console.log('Search for ' + $('#search_input').val());
17     el: $('#search_contailer'18 });

><%= search_label %>< 2     el: $('#search_contailer'),1)">可以将el直接写在这里
 3     initialize:  4          6     render: var variables = {使用模版变量
 8             search_label: 'Kagol Search: '  可以传递多个参数
        };
).html());
11         .$el.html(template(variables));
13     events: {14         'click #search_button': 'doSearch'
16     doSearch: 17         console.log('Search for ' + $('#search_input'19 new SearchView;

="artist_template"<% _.each(artists,function(artist){ %>
3         tr4             td artist.get('name) td>
5             hometown6         tr>
7      }); 8 9 table ="table"tablevar Artist = 3         name: 'Jack' 4         hometown: 'American'
(){}
var Artists = Backbone.Collection.extend({
    model: Artist
var artist1 =  Artist;
var artist2 =  Artist({
13     name: 'Kagol'14     hometown: 'China'
var artist3 = 17     name: 'Elizabeth'18     hometown: 'England'
var artists =  Artists([artist1,artist2,artist3]);
21 var ArtistView =22     el: $('#table'),1)">23     template: _.template($('#artist_template').html()),1)">24     initialize: 25         26 27     render: 28         this.$el.html(.template({
29             artists: artists.models
30         }));
31 32 33 var artistView = new ArtistView;