backbonejs #6

uniquejava · 2015-12-15T04:43:39Z

模板代码：

Model

var Human = Backbone.Model.extend({
  defaults: {
    name: 'Fetus',
    age: 0,
    child: ''
  },
  initialize: function(){
    alert("Welcome to this world");
  },
  adopt: function( newChildsName ){
    this.set({ child: newChildsName });
  }
});

var human = new Human({ name: "Thomas", age: 67, child: 'Ryan'});
human.adopt('John Resig');
var child = human.get("child"); // 'John Resig'

View

<script type="text/template" id="search_template">
  <label>Search</label>
  <input type="text" id="search_input" />
  <input type="button" id="search_button" value="Search" />
</script>

<div id="search_container"></div>

<script type="text/javascript">
  var SearchView = Backbone.View.extend({
    initialize: function(){
      this.render();
    },
    render: function(){
      // Compile the template using underscore
      var template = _.template( $("#search_template").html(), {} );
      // Load the compiled HTML into the Backbone "el"
      this.$el.html( template );
      return this;
    }
  });

  var search_view = new SearchView({ el: $("#search_container") });
</script>

Collection

var Song = Backbone.Model.extend({
  defaults: {
    name: "Not specified",
    artist: "Not specified"
  },
      initialize: function(){
          console.log("Music is the answer");
      }
  });

  var Album = Backbone.Collection.extend({
  model: Song
});

var song1 = new Song({ name: "How Bizarre", artist: "OMC" });
var song2 = new Song({ name: "Sexual Healing", artist: "Marvin Gaye" });
var song3 = new Song({ name: "Talk It Over In Bed", artist: "OMC" });

var myAlbum = new Album([ song1, song2, song3]);
console.log( myAlbum.models ); // [song1, song2, song3]

Router

var AppRouter = Backbone.Router.extend({
    routes: {
        "*actions": "defaultRoute"
        // matches http://example.com/#anything-here
    }
});
// Initiate the router
var app_router = new AppRouter;

app_router.on('route:defaultRoute', function(actions) {
    alert(actions);
});

// Start Backbone history a necessary step for bookmarkable URL's
Backbone.history.start();

History

Sync

可以在Model或Collection中覆盖sync方法如下：

I typically need to override backbone's sync method when I need to only sync certain attributes. A typical implementation looks like this:

sync: function (method, model, options) {
  options.data = _.pick(this.attributes, 'foo', 'bar', 'baz');
  return Backbone.sync.call(this, method, model, options);
}

这里有lcoalStorage是如何重写Sync方法的：
http://backbonejs.org/docs/backbone.localStorage.html

uniquejava · 2016-01-02T14:51:58Z

Lessons learned

不要给view指定el: '#content', 每个view应该有各自的div, 这是因为在changeView的时候会调用view.remove()会将当前的#content给干掉，导致接下来的view无法显示到页面上

uniquejava · 2016-01-05T12:43:38Z

Router

如何以编程的方式添加新的route
http://stackoverflow.com/questions/9595182/programmatically-adding-routes-to-backbone-router

var AppRouter = Backbone.Router.extend({
    routes: {
        "": 'showDashboard',
       '/test/me': function(){},
        "*actions": "defaultRoute"
    },
    defaultRoute: function(actions){},
    testMeAgain: function(){}
});
// Initiate the router
var app_router = new AppRouter;

app_router.on('route:defaultRoute', function(actions) {
    alert(actions);
});

// 以下这句没起作用， 原因是通过route方法添加的route会放到routes的最后，
// 也就是放在了*actions的最后，所以没起作用，
// 解决办法是把*actions从routes中移除， 然后以编程的方式放在下面这句的后面。
app_router.route('/test/me/again', 'testMeAgain');


// Start Backbone history a necessary step for bookmarkable URL's
Backbone.history.start();

如果console.log(app_router)会发现并没有这个对象中并没有全部的routes，这是因为route方法将新的route放到了Backbone.history里边。见这里

route: function(route, name, callback) {
  // ...
  Backbone.history.route(route, _.bind(function(fragment) {
    //...
  }, this));
  return this;
},

uniquejava · 2016-01-21T05:28:54Z

继承测试

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="bower_components/underscore/underscore-min.js"></script>
    <script type="text/javascript" src="bower_components/backbone/backbone.js"></script>
</head>
<body>
<div id="content">

</div>

<script type="text/javascript">
    var ListView = Backbone.View.extend({
        el: '#content',

        number: 5,

        initialize: function () {
            this.render();
        },

        render: function(){
            this.$el.html(this.getNumber());
        },

        getNumber: function(){
            return this.number;
        }

    });

    var CustomListView = ListView.extend({
        number: 6
    });

    var view = new CustomListView();

</script>

</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

backbonejs #6

backbonejs #6

uniquejava commented Dec 15, 2015

uniquejava commented Jan 2, 2016

uniquejava commented Jan 5, 2016

uniquejava commented Jan 21, 2016

backbonejs #6

backbonejs #6

Comments

uniquejava commented Dec 15, 2015

Model

View

Collection

Router

History

Sync

uniquejava commented Jan 2, 2016

Lessons learned

uniquejava commented Jan 5, 2016

Router

uniquejava commented Jan 21, 2016

继承测试