MVC框架与Backbone.js

var AppName = {
  Models       :{},
  Views        :{},
  Collections  :{},
  Controllers  :{}
};

AppName.Models.Person = Backbone.Model.extend({
  urlRoot: "/persons"
});

AppName.Collections.Library = Backbone.Collection.extend({
  model: AppName.Models.Book
});

AppName.Views.Modals.AcceptDecline = Backbone.View.Extend({
  el: ".modal-accept",

  events: {
    "ajax:success .link-accept" :"acceptSuccess",
    "ajax:error   .link-accept" :"acceptError"
  },

  acceptSuccess :function(evt, response) {
    this.$el.modal("hide");
    alert('Cool! Thanks');
  },

  acceptError :function(evt, response) {
    var $modalContent = this.$el.find('.panel-modal');

    $modalContent.append("Something was wrong!");
  }
});

AppName.Controllers.Person = {};
AppName.Controllers.Person.show = function(id) {
  var aMa = new AppName.Models.Person({id: id});
  
  aMa.updateAge(25);
  
  aMa.fetch().done(function(){
    var view = new AppName.Views.Show({model: aMa});
  });
};

var Workspace = Backbone.Router.extend({
  routes: {
    "*"                  :"wholeApp",
    "users/:id"          :"usersShow",
    "users/:id/orders/"  :"ordersIndex"
  },
  
  wholeApp    :AppName.Controller.Application.default,
  usersShow   :AppName.Controller.Users.show,
  ordersIndex :AppName.Controller.Orders.index
});
 
new Workspace();
Backbone.history.start({pushState: true});

var document = new Document({
  model: doc
});

var AppView = Backbone.View.extend({
  initialize: function(){
    this.render();
  },
  render: function(){
    $('main').append('<h1>一级标题</h1>');
  }
});

var appView = new AppView();

var Document = Backbone.View.extend({
  tagName: "li",
  className: "document",
  render: function() {
   // ...
  }
});

var AppView = Backbone.View.extend({
      template: _.template("<h3>Hello <%= who %><h3>"),
});

var AppView = Backbone.View.extend({
      el: $('#container'),
      template: _.template("<h3>Hello <%= who %><h3>"),
      initialize: function(){
        this.render();
      },
      render: function(){
        this.$el.html(this.template({who: 'world!'}));
      }
});

var Document = Backbone.View.extend({
  events: {
    "click .icon":          "open",
    "click .button.edit":   "openEditDialog",
    "click .button.delete": "destroy"
  }
});

var Document = Backbone.View.extend({
  initialize: function() {
    this.listenTo(this.model, "change", this.render);
  }
});

updateView: function() {
  view.remove();
  view.render();
};

var EventChannel = _.extend({}, Backbone.Events);

var channel = $.extend( {}, Backbone.Events );
channel.on('remove-node', function(msg) {
   // code to remove the node
});
channel.trigger( 'remove-node', msg );
// 'msg' can be everything: String, number, object and so forth
// also we can pass more than one message like the example below
channel.on('add-node', function(node, callback) {
  // code to add a new node
  callback();
} );
channel.trigger('add-node', {
  label: 'I am a new node',
  color: 'black'
}, function() {
  console.log( 'I am a callback' );
});

var AppRouter = Backbone.Router.extend({
    routes: {
        "*actions": "defaultRoute" 
    }
});

var app_router = new AppRouter;

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

var myrouter = Backbone.Router.extend({
  routes: {
    "help":                 "help",    
    "search/:query":        "search" 
  },

  help: function() {
    ...
  },

  search: function(query) {
    ...
  }
});

routes: {
  "help/:page":         "help",
  "download/*path":     "download",
  "folder/:name":       "openFolder",
  "folder/:name-:mode": "openFolder"
}
router.on("route:help", function(page) {
  ...
});

Backbone.history.start({pushState: true, root: "/public/search/"})

var User = Backbone.Model.extend({
        defaults: {
            name: '',
            email: ''
        }
});

var user = new User();

var user = new User ({
    id: 1,
    name: 'name',
    email: 'name@email.com'
});

var Music = Backbone.Model.extend({ 
    idAttribute: 'id'
});

var user = new User({ name: "name", age: 24});
var age = user.get("age"); // 24
var name = user.get("name"); // "name"

var User = Backbone.Model.extend({
    buy: function(newCarsName){
        this.set({car: newCarsName });
    }
});

var user = new User({name: 'BMW',model:'i8',type:'car'});
user.buy('Porsche');
var car = user.get("car"); // ‘Porsche’

var user = new User({name: 'BMW',model:'i8'});

user.on("change:name", function(model){
    var name = model.get("name"); // "Porsche"
    console.log("Changed my car’s name to " + name);
});

user.set({name: 'Porsche'}); 
// Changed my car’s name to Porsche

var User = Backbone.Model.extend({
    urlRoot: '/user'
});

var user = new User ({id: 1});
user.fetch({
    success: function (user){
        console.log(user.toJSON());
    }
})

var User = Backbone.Model.extend({
    urlRoot: '/user'
});

var user = new User ();
var userDetails = {
    name: 'name',
    email: 'name@email.com'
};

user.save(userDetails, {
    success: function (user) {
        console.log(user.toJSON());
    }
})

var user = new User ({
    id: 1,
    name: '张三',
    email: 'name@email.com'
});

user.save({name: '李四'}, {
    success: function (model) {
        console.log(user.toJSON());
    }
}); 

var user = new User ({
    id: 1,
    name: 'name',
    email: 'name@email.com'
});

user.destroy({
    success: function () {
       console.log('Destroyed');
    }
});

var Song = Backbone.Model.extend({});

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

var song1 = new Song({ id: 1 ,name: "歌名1", artist: "张三" });
var song2 = new Music ({id: 2,name: "歌名2", artist: "李四" });
var myAlbum = new Album([song1, song2]);

var song3 = new Music({ id: 3, name: "歌名3",artist:"赵五" });
myAlbum.add(song3);

myAlbum.remove(1);

myAlbum.get(2)

var songs = new Backbone.Collection;
songs.url = '/songs';
songs.fetch();

var obj = {};
_.extend(obj, Backbone.Events);

obj.on("show-message", function(msg) {
	$('#display').text(msg);
});

obj.trigger("show-message", "Hello World");