Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Backbone.js :tips & tricks

372 views

Published on

about backbone ids

Published in: Technology
  • Be the first to comment

Backbone.js :tips & tricks

  1. 1. tips & tricks Backbone.js dasolute.com
  2. 2. 신대현 @dahinir 백수
  3. 3. Alloy X Backbone
  4. 4. Vesion Backbone 최신 1.1.2 Alloy 사용 버젼 0.9.2 http://docs.appcelerator.com/backbone/0.9.2/
  5. 5. 앱 설정값을 backbone.js 로 저장 해 보자! 전역적으로 사용될 설정값들. 예를 들어 run_count theme active_tab ..
  6. 6. 저장된 앱 셋팅을 불러오자 // 아마도 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.. };
  7. 7. 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') );
  8. 8. 이렇게 쓰고 싶어 var settings = Alloy.createModel('settings'); // 저장된 앱 설정값을 불러온다. settings.fetch();
  9. 9. .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 안되네?
  10. 10. 아 맞다 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'
  11. 11. model.id vs model.set('id') with idAttribute
  12. 12. 먼저 model.attributes var settings = Alloy.createModel('settings'); settings.set('run_count', 3); settings.attributes.run_count; //3 settings.get('run_count'); // 3 일반적으로 쓰이는 모델 변수들은 실제로 model.attributes 에 저장됨
  13. 13. 하지만 id 는 특별한 property 각 모델의 identity를 결정하는 meta data 하지만 model.attributes 에도 저장됨 settings.set('id', 'WHAT_EVER_YOU_WANT'); settings.id; // WHAT_EVER_YOU_WANT settings.get('id'); // WHAT_EVER_YOU_WANT settings.id = 'WHAT_EVER_YOU_WANT'; settings.id; // WHAT_EVER_YOU_WANT settings.get('id'); // undefined
  14. 14. id 동작은 model.id 기반으로 함 id는 일반 변수 중 하나로 지정되서 사용됨 햇갈? .idAttribute 기본값이 'id' 라서 햇갈햇반
  15. 15. model.idAttribute = _id; settings.idAttribute = "_id"; settings.set('_id') = "WHAT_EVER_YOU_WANT"; settings.id; // 그래도 이건 아이디(변수 자체가 Backbone이 지정) settings._id; // undefined settings.attributes._id; // 이게 아이디로 사용 settings.get('_id'); // 이것도 settings.get('id'); // undefined .idAttribute는 .attributes의 변수중 id로 사용할 변수의 이름을 지정
  16. 16. 아까 그거 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'
  17. 17. 우아하게 쓰려면.. var settings = Alloy.Models.instance('settings'); settings.save('theme', 'green'); var settings = Alloy.Models.instance('settings'); settings.fetch(); settings.get('theme'); // 'green'
  18. 18. 모델 정의에서 해결 config: { adapter: { type: "properties" } }, extendModel: function(Model) { _.extend(Model.prototype, { id: "WHAT_EVER_YOU_WANT" }); return Model; }
  19. 19. 되진 되지만.. var settings = Alloy.Models.instance('settings'); settings.fetch(); settings.id; // WHAT_EVER_YOU_WANT settings.get('id') // undefined
  20. 20. .attributes에 셋팅되야 할것은 .defaults에 config: { .. }, extendModel: function(Model) { _.extend(Model.prototype, { defaults: { id: "WHAT_EVER_YOU_WANT" } }); return Model; } appcelerator문서에는 defaults를 config안에 넣으라 되있지만..
  21. 21. 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; }
  22. 22. type: "properties" 결론 Alloy보단 Backbone을 믿는게.. - 내가 사용할 모델 프로퍼티와 id는 .get()과 .set()을 사용한다. 이것들은 model.attributes에 저장된다. 이것들의 기본값은 model.defaults 객체에 선언한다. - id를 제외한 특수 목적의 백본 변수 기본값은 Model.prototype에 직접 id는 model.id에도 저장되고 model.attributes.id에도 저장되서 햇반
  23. 23. model.cid 는 또 뭐야 백본이 알아서 생성하는 아이디 클라이언트에서만 유일한 값 같은 인스턴스인지 체크할때 유용
  24. 24. model.defaults에 객체를 넣으려면 // photo model defaults: { url: "/photo/defaults.png", owner: { name: "Me", age: -1 } }
  25. 25. ?!! var myPhoto1 = Alloy.createModel('photo'); var myPhoto2 = Alloy.createModel('photo'); myPhoto1.get('owner').age; // -1 myPhoto2.get('owner').age; // -1 myPhoto2.get('owner').age = 22; myPhoto1.get('owner').age; // 22 myPhoto2.get('owner').age; // 22 in JavaScript, objects are passed by reference
  26. 26. define defaults as a function // photo model defaults: function(){ return { url: "/photo/defaults.png", owner: { name: "Me", age: -1 } }; }
  27. 27. tutorials http://backbonejs.org http://backbonetutorials.com http://addyosmani.github.io/backbone-fundamentals/
  28. 28. Keep Your Models Fat! Code Strong!

×