backbone.js :tips & tricks

Click here to load reader

Post on 15-Jul-2015

81 views

Category:

Technology

0 download

Embed Size (px)

TRANSCRIPT

  • tips & tricksBackbone.js

    dasolute.com

  • @dahinir

  • Alloy X Backbone

  • VesionBackbone 1.1.2Alloy 0.9.2

    http://docs.appcelerator.com/backbone/0.9.2/

  • backbone.js !

    .

    run_count

    theme

    active_tab

    ..

  • // alloy.js( ) // .Alloy.Globals.settings = { run_count: Ti.App.Properties.getString("run_count"), theme: Ti.App.Properties.getString("theme"), active_tab: Ti.App.Properties.getString("active_tab") // etcs..};

  • Backbone.model var settings = Alloy.createModel('settings');

    // .settings.set({ run_count: Ti.App.Properties.getString("run_count"), theme: Ti.App.Properties.getString("theme"), active_tab: Ti.App.Properties.getString("active_tab")});

    // settings !myTabGroup.setActiveTab( settings.get('active_tab') );

  • var settings = Alloy.createModel('settings');

    // .settings.fetch();

  • .save() .fetch() ..// var settings = Alloy.Models.instance('settings');settings.save('theme', 'green');

    // settings.clear();delete settings;

    // var settings = Alloy.Models.instance('settings');settings.fetch();settings.get('theme'); // undefined

    ?

  • id id .

    var settings = Alloy.Models.instance('settings');// settings.id = "WHAT_EVER_YOU_WANT";settings.save('theme', 'green');

    var settings = Alloy.Models.instance('settings');settings.id = "WHAT_EVER_YOU_WANT";settings.fetch();settings.get('theme'); // 'green'

  • model.idvs

    model.set('id')with idAttribute

  • model.attributesvar settings = Alloy.createModel('settings');settings.set('run_count', 3);

    settings.attributes.run_count; //3settings.get('run_count'); // 3

    model.attributes

  • id property identity meta data model.attributes

    settings.set('id', 'WHAT_EVER_YOU_WANT');

    settings.id; // WHAT_EVER_YOU_WANTsettings.get('id'); // WHAT_EVER_YOU_WANT

    settings.id = 'WHAT_EVER_YOU_WANT';

    settings.id; // WHAT_EVER_YOU_WANTsettings.get('id'); // undefined

  • id model.id

    id ? .idAttribute 'id'

  • model.idAttribute = _id;settings.idAttribute = "_id";settings.set('_id') = "WHAT_EVER_YOU_WANT";

    settings.id; // ( Backbone )settings._id; // undefinedsettings.attributes._id; // settings.get('_id'); // settings.get('id'); // undefined

    .idAttribute .attributes id

  • var settings = Alloy.Models.instance('settings');settings.id = "WHAT_EVER_YOU_WANT";settings.save('theme', 'green');

    var settings = Alloy.Models.instance('settings');settings.id = "WHAT_EVER_YOU_WANT";settings.fetch();

    settings.get('theme'); // 'green'

  • ..var settings = Alloy.Models.instance('settings');settings.save('theme', 'green');

    var settings = Alloy.Models.instance('settings');settings.fetch();

    settings.get('theme'); // 'green'

  • config: { adapter: { type: "properties" }},extendModel: function(Model) { _.extend(Model.prototype, { id: "WHAT_EVER_YOU_WANT" }); return Model;}

  • ..var settings = Alloy.Models.instance('settings');settings.fetch();

    settings.id; // WHAT_EVER_YOU_WANTsettings.get('id') // undefined

  • .attributes .defaults

    config: { .. },extendModel: function(Model) { _.extend(Model.prototype, { defaults: { id: "WHAT_EVER_YOU_WANT" } }); return Model;}

    appcelerator defaults config ..

  • type: "properties" ..// config :Alloy config: { defaults: { theme: "blue" // ! }, adapter: { type: "properties", // not "sql" collection_name: "settings", idAttribute: "_id" // !! }},extendModel: function(Model) { _.extend(Model.prototype, { idAttribute: "_id", // !! id: "WHAT_EVER_YOU_WANT", // .. not _id defaults: { // attributes _id: "WHAT_EVER_YOU_WANT", theme: "blue" // !! } }); return Model;}

  • type: "properties" Alloy Backbone ..

    - id .get() .set() .

    model.attributes .

    model.defaults .-

    id Model.prototype id model.id model.attributes.id

  • model.cid

  • model.defaults // photo modeldefaults: { url: "/photo/defaults.png", owner: { name: "Me", age: -1 }}

  • ?!!var myPhoto1 = Alloy.createModel('photo');var myPhoto2 = Alloy.createModel('photo');

    myPhoto1.get('owner').age; // -1myPhoto2.get('owner').age; // -1

    myPhoto2.get('owner').age = 22;

    myPhoto1.get('owner').age; // 22myPhoto2.get('owner').age; // 22

    in JavaScript, objects are passed by reference

  • define defaults as a function// photo modeldefaults: function(){ return { url: "/photo/defaults.png", owner: { name: "Me", age: -1 } };}

  • tutorialshttp://backbonejs.org

    http://backbonetutorials.comhttp://addyosmani.github.io/backbone-fundamentals/

  • Keep Your Models Fat!Code Strong!