![Backbone－Model
23
Key-Value Pairs
app.TestUp = Backbone.Model.extend({
url: function() {
return '/1/sandbox/weather/'
+ this.attributes.city;
},
wsUrl: function() {
return 'ws://wot.city/object/smarthome/viewer'
},
defaults: {
success: false,
errors: [],
errfor: {},
!
city: '',
temperature: 0
},
// AutomationJS plugins
parseJSON: function() {
var humidity = this.get('humidity')
, lowpulseoccupancytime = this.get('lowpulseoccupancytime')
, uv = this.get('uv')
, gas = this.get('gas')
, temperature = this.get('temperature');
this.set('result', false);
}
});
取得温度 RESTful
API](https://image.slidesharecdn.com/frotend-150412070323-conversion-gate01/85/WoT-Frotend-23-320.jpg)
More Related Content
What's hot (19)
Similar to WoT Frotend 的設計與實作 (20)
WoT Frotend 的設計與實作
- 1. Frontend 设计与实现 Mokoversity / Julie Huang
- 2. WoT ? IoT 的 Application Layer ? 使?用 Web 技術來打造 Application
- 3. WoT 关键技术 ? Application Framework ? Application Frontend 的 Composition Layer 設計
- 4. ?一个轻量级的 Composition Layer 实作 AutomationJS ? AutomationJS 是?一个轻量级的 MVVM ? 利?用 Virtual DOM 技术，来进?行 UI Boundary Composition ? 使?用 Backbone 做为 Model-View 的基础 ? 未来也将接轨 HTML 5 的新技术标准－Shadow DOM
- 5. Single Page Web Apps 来源： http://apievangelist.com/2013/05/23/ember- angular-backbone-single- page-applications-and-apis/
- 7. REST API 来源： http://apievangelist.com/2013/05/23/ember- angular-backbone-single- page-applications-and-apis/
- 14. MVWhaterver ? MVC ? MVP ? MVVM ? MV*
- 15. MVVM vs MVC MVC 写程式 不?用写 Component Template+ Data Binding Template+ Control Logic ! MVVM MVVM React
- 16. 来源：http://code.tutsplus.com/tutorials/important- considerations- when-building-single-page-web-apps-- net-29356 选择 Full Stack Framework
- 17. Backbone ? Backbone 必须与 Underscore 搭配使?用 ? Backbone 是?一个 MVC 框架，?一开始先定义 Model 与 View ? Model 就是「表?示资料的模型」,也就是将会显?示在画?面上的 资料 ? Model ?里的资料，要?用 Key-Value Pairs 的格式表?示 ? View 的部份将负责处理 Template 与 Model 的对应 ? View 的部份，也负责处理控制的部份，例如: Button 的 click 事件
- 18. Key-Value Pairs ? JSON 资料格式 ? 将 JSON「套?用」到 Template { "name": "julie"}
- 19. Underscore ＆Backbone ? Underscore 会将 Model 的变数与 Template 做对 应，并且?用变数值取代，这个对应关系就是 ViewModel 的观念 ? Underscore 透过 Template 将 Model ?里的资料,显?示 到画?面上 ? 显?示资料到画?面上，不需要写程式；对设计师来说, 只要修改 Template
- 20. Backbone Data Model ? Backbone.Model 除了表?示资料外,还提供各种处理模型 ? 最重要的处理模型：manage change ? ?一但 Model 裡的資料有變動（例如:新增、刪除等），就 透過 Backbone.Model.fetch 重新做 "Data Mapping” ? 使?用 Model fetch 的?方式,让 Response data 的处理更严 谨 ? 使?用 Data model 的?方式，让 Data 与 API 偶和 （Aggregation）在?一起
- 21. Backbone 基本框架 /**! * SETUP! **/! var app = app || {};! ! /**! * MODELS! **/! ! ! /**! * VIEWS! **/! app.MessageView = Backbone.View.extend({! events: {! },! });! ! /**! * BOOTUP! **/! $(document).ready(function() {! app.messageView = new app.MessageView();! });
- 22. ! ! script(type='text/template', id='tmpl-dust') .col-md-4 a.text-center.btn-mbed-spot-news img.img-responsive(src!='/images/gallery/timeline-1.jpg') .info h2 温度 h2 <%= sensordata %> template－Jade 22 来取?用变数值
- 23. Backbone－Model 23 Key-Value Pairs app.TestUp = Backbone.Model.extend({ url: function() { return '/1/sandbox/weather/' + this.attributes.city; }, wsUrl: function() { return 'ws://wot.city/object/smarthome/viewer' }, defaults: { success: false, errors: [], errfor: {}, ! city: '', temperature: 0 }, // AutomationJS plugins parseJSON: function() { var humidity = this.get('humidity') , lowpulseoccupancytime = this.get('lowpulseoccupancytime') , uv = this.get('uv') , gas = this.get('gas') , temperature = this.get('temperature'); this.set('result', false); } }); 取得温度 RESTful API
- 24. app.TemperatureView = Backbone.View.extend({ el: '#test-up', template: _.template( $('#tmpl-dust').html() ), events: { }, initialize: function() { this.component = new Automation({ el: this.$el, model: app.TestUp, template: this.template }); ! // initialize sub tree var model = this.component.add({ city: 'Taipei', country: 'tw', lowpulseoccupancytime: 0, temperature:23, href: 'https://www.mokoversity.com/coders', img: '/images/gallery/timeline-1.jpg' }); ! model.bind('notify.change', this.render, model); }, render: function() { $('#current div.bottom') .css('height', '60px') .animate({ height: this.get('x') }, 1000); } }); Backbone－View 24 Template 的名称 当资料变了画?面就 跟着改变
- 26. 谢谢