Convert the AppointmentForm view below to use Mustache templating. Make sure you remember to change the <%= %> placeholders with Mustache's {{}} placeholders.

var AppointmentForm = Backbone.View.extend({
template: Mustache.compile('<form>' +
'<input name="title" type="text" value="{{title }}" />' +
'<input name="name" type="text" value="{{ name }}" /></form>'), render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});

As you can see in our Appointment view below, we are rendering the list of possible dates an appointment could occur. possibleDates is an attribute on the Appointment model, and it's value is always an array of strings.

Convert the view below to use Mustache.

App.Views.Appointment = Backbone.View.extend({
template: Mustache.compile('<h2>{{ title }}</h2>' +
'Possible Dates: <ul>{{ #possibleDates }}' +
'<li>{{ . }}</li>' +
'{{ /possibleDates }}</ul>'),
render: function(){
this.$el.html(this.template(this.model.attributes));
return this;
}
});

possibleDates has changed from an Array of strings to an Array of objects with day and time properties. Update the Mustache template below to render the li tag with both day and time inside them, like so:

<li>Tuesday at 3:00pm</li>

App.Views.Appointment = Backbone.View.extend({
template: Mustache.compile('<h2>{{ title }}</h2>' +
'Possible Dates: <ul>{{#possibleDates}}' +
'<li>{{day}} at {{time}}</li>' +
'{{/possibleDates}}</ul>'), render: function(){
this.$el.html(this.template(this.model.attributes));
return this;
}
});

Dr. Goodparts has instituted a new (possibly controversial) policy: Appointments can not be changed. The office can create appointments, but they will no longer be able to update them or delete them.

To comply with this new policy, modify the Appointment model's sync function below to only work on read andcreate, but not on delete and update.

App.Models.Appointment = Backbone.Model.extend({
sync: function(method, model, options){
if (method === "read" || method === "create"){
Backbone.sync(method, model, options);
}else {
console.log("Dr. Goodparts says no!");
}
}
});

Well that was quick. Dr. Goodparts has changed his mind and now wants to be able to update and delete appointments again. Unfortunately, the server team has defected to Dr. Jay Query and so we've had to use HTML5 localStorage to store our appointments.

Below we've started to implement the localStorage strategy, handling the "read" and "create" methods. In this challenge, write the code to handle the "delete" method.

App.Models.Appointment = Backbone.Model.extend({
sync: function(method, model, options){
options = options || {}; switch(method){
case 'delete':
var key = "Appointment-" + model.id;
localStorage.removeItem(key, JSON.stringify(model));
break;
case 'update':
break;
case 'create':
var key = "Appointment-" + model.id;
localStorage.setItem(key, JSON.stringify(model));
break;
case 'read':
var key = "Appointment-" + model.id;
var result = localStorage.getItem(key);
if(result){
result = JSON.parse(result);
options.success && options.success(result);
}else if(options.error){
options.error("Couldn't find Appointment with id=" + model.id);
}
break;
}
}
});

Fantastic! Now to finish it up, all you need to do is implement the update case below. Use setItem andJSON.stringify, just like in the create case.

App.Models.Appointment = Backbone.Model.extend({
sync: function(method, model, options){
options = options || {}; switch(method){
case "delete":
var key = "Appointment-" + model.id;
localStorage.removeItem(key);
break;
case "update":
var key = "Appointment-" + model.id;
localStorage.setItem(key, JSON.stringify(model));
break;
case "create":
var key = "Appointment-" + model.id;
localStorage.setItem(key, JSON.stringify(model));
break;
case "read":
var key = "Appointment-" + model.id;
var result = localStorage.getItem(key);
if(result){
result = JSON.parse(result);
options.success && options.success(result);
}else if(options.error){
options.error("Couldn't find Appointment with id=" + model.id);
}
break;
}
}
});

[Backbone] Customzing Backbone的更多相关文章

  1. [Backbone]Make Backbone Better With Extensions

    Backbone is becoming wildly popular as a web application development framework. Along with this popu ...

  2. 【Backbone】 Backbone初探

    前言 在此之前研究了一段React,但是不得不承认React.Vue等MVVM框架相对于原有的Jquery来说,简直是翻天覆地的不同.它们之间的差异不仅仅体现在框架思维的不同,而是ES5到ES6的编程 ...

  3. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  4. Backbone源码分析(一)

    距离上一篇博客有一段时间了,期间各种琐事萦绕.最主要的一件是,当我差不多将整个dojo核心源码看完,惊讶的发现dojo1.*的设计以是老态龙钟之象,而我沉溺在dojo中太久,已经不知道前端世界变成了什 ...

  5. RequireJS与Backbone简单整合

    前言 昨天我们一起学习了Backbone,最后做了一个备忘录的例子,说是做了不如说是看了下官方提供的例子,所以最终我感觉我们还是没能掌握Backbone,今天还得做个其它例子先. 然后前面也只是草草学 ...

  6. 浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...

  7. TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之二 数据处理

    当我们使用jQuery时大部分时间是聚焦于Dom节点的处理,给Dom节点绑定事件等等:前端mvc框架backbone则如何呢? M-Model,Collection等,是聚焦于数据的处理,它把与后台数 ...

  8. TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之一

    Marionette牵线木偶,Backbone是脊骨的意思,Marionette是基于Backbone做扩展库,可以理解为把脊骨骨架绑线扯着变成牵线木偶动起来哈哈,使backbone更易使用呵呵! 构 ...

  9. Django+Tastypie作后端,Backbone作前端的TodoMVC

    TodoMVC是各种js框架入门的比较经典的例子,详细可查看github地址https://github.com/tastejs/todomvc 接着上篇文章, 1,先在github上把backbon ...

随机推荐

  1. 周末 “CTO训练营”

    今天下午去中关村参加了51cto高招 “CTO训练营”  第一期. 呃蛮有收获,聊技术发展,技术cto线路或对应发展,人事对应cto发展,投资人对应看法,51cto老总的看法. 呃,挺有意思,同样认识 ...

  2. hdu 5289 Assignment(2015多校第一场第2题)RMQ+二分(或者multiset模拟过程)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5289 题意:给你n个数和k,求有多少的区间使得区间内部任意两个数的差值小于k,输出符合要求的区间个数 ...

  3. AVL树理解

    AVL树理解 简介 我们知道,AVL树也是平衡树中的一种,是自带平衡条件的二叉树,始终都在维护树的高度,保持着树的高度为logN,同时把插入.查找.删除一个结点的时间复杂度的最好和最坏情况都维持在O( ...

  4. GIT(4)----免输入账号和密码方法

    1.全局方式 包删除了,再次下载也不需要在配置输入密码和用户名 参考资料:git pull 和 git push免输入账号和密码方法 2.局部方式 包删除了,密码用户也会被删除,需要重新设置 打开终端 ...

  5. Tomcat启动异常 java.net.BindException: Cannot assign requested address: JVM_Bind

    从Apache官网下载的tomcat7,在MyEclipse中启动时抛出如下异常: 严重: StandardServer.await: create[localhost:8005]: java.net ...

  6. SQL Plus和PL/SQL

    一.SQL Plus是oracle提供的一种用户接口.类似于操作系统的命令行.用户可以通过在SQL Plus中输入命令来向数据库发            送命令,数据库也将处理结果通过SQL Plus ...

  7. Windows程序调试系列: 使用VC++生成调试信息 转

    Windows程序调试系列: 使用VC++生成调试信息 ZhangTao,zhangtao.it@gmail.com, 译自 “Generating debug information with Vi ...

  8. .Net高级技术——结构体

    结构体 结构体和类的区别:结构体是值类型,类是引用类型 结构体非常类似于类,但是值类型(拷贝传递),不能被继承 Int32.DateTime等都是结构体,从ValueType继承,值类型. 结构体测试 ...

  9. 漫谈js自定义事件、DOM/伪DOM自定义事件

    一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...

  10. debian安装ibus中文输入法

    转载自:http://www.shunix.com/debian-ibus-chinese-470/ 以前在debian一直用scim,但是那个真的很不好用,现在用的是debian squeeze还是 ...