TodoMVC是各种js框架入门的比较经典的例子，详细可查看github地址https://github.com/tastejs/todomvc
接着上篇文章，
1，先在github上把backbone的todoMVC的例子下载下来
2，给其建立一个名为Todo的model(E:\project\tastypie\mysite\blog\models.py)
class Todo(models.Model):
title = models.CharField(max_length=200)
completed=models.BooleanField(default=False) def __str__(self):
return self.title def save(self, *args, **kwargs):
return super(Todo,self).save(*args, **kwargs)
参照前几篇的文章在命令行输入命令把其数据表应用到sqllite数据库。
3，添加api resource 和 配置tastypie的api接口的url
E:\project\tastypie\mysite\blog\api\resources.py
from tastypie.authorization import Authorization
from tastypie import fields
from tastypie.resources import ModelResource
from blog.models import Todo
class TodoResource(ModelResource):
class Meta:
queryset = Todo.objects.all()
resource_name = 'todo'
authorization = Authorization()
fields=['id','title','completed']
主url E:\project\tastypie\mysite\blog\urls.py
from django.conf.urls import patterns, include, url
from django.contrib import admin
from tastypie.api import Api
from blog.api.resources import EntryResource,UserResource,TodoResource v1_api = Api(api_name='v1')
v1_api.register(TodoResource()) urlpatterns = patterns('',
# Examples:
(r'^blog/', include('blog.urls',namespace="blog")),
(r'^api/', include(v1_api.urls)),
(r'^admin/', include(admin.site.urls)),
)
子url E:\project\tastypie\mysite\blog\urls.py
from django.conf.urls import patterns,url
from blog import views urlpatterns=patterns('',
url(r'^$',views.IndexView.as_view(),name='index'),
)
配置一下view，E:\project\tastypie\mysite\blog\views.py
from django.shortcuts import render
from django.views import generic # Create your views here.
class IndexView(generic.ListView):
template_name='blog/index.html'
context_object_name=''
def get_queryset(self):
return ''
4，把github上下载的backbone todomvc的静态文件(js,html,css文件)放到相应的目录下
index.html文件放到E:\project\tastypie\mysite\blog\templates\blog\index.html
其他js和css文件都放到新创建的E:\project\tastypie\mysite\blog\static\todos目录下
5，可以改改index.html文件中的js与css文件的引用路径，先试试用浏览器的localstorage本地跑起来看看
<link rel="stylesheet" href="/static/todos/bower_components/todomvc-common/base.css">
<script src="/static/todos/bower_components/todomvc-common/base.js"></script>
<script src="/static/todos/bower_components/jquery/dist/jquery.js"></script>
<script src="/static/todos/bower_components/underscore/underscore.js"></script>
<script src="/static/todos/bower_components/backbone/backbone.js"></script>
<script src="/static/todos/bower_components/backbone.localStorage/backbone.localStorage.js">//等会要注释掉
<script src="/static/todos/js/models/todo.js"></script>
<script src="/static/todos/js/collections/todos.js"></script>
<script src="/static/todos/js/views/todo-view.js"></script>
<script src="/static/todos/js/views/app-view.js"></script>
<script src="/static/todos/js/routers/router.js"></script>
<script src="/static/todos/js/app.js"></script>
6，本地运行没问题后，现在来改backbone前端js代码让其去连Tastypie的api
1）改backbone的model文件与collection文件
E:\project\tastypie\mysite\blog\static\todos\js\models\todo.js 添加urlRoot为tastypie的api接口
app.Todo = Backbone.Model.extend({
。。。
urlRoot: '/api/v1/todo/',
。。。
});
E:\project\tastypie\mysite\blog\static\todos\js\collections\todos.js 把localStorage那句注释掉，添加url为tastypie的api接口 和 接口数据解析函数parse去获取objects数据（注意：tastypie返回的json数据格式是{meta:{},objects:[{真正数据}]}）
var Todos = Backbone.Collection.extend({
。。。
//localStorage: new Backbone.LocalStorage('todos-backbone'),
url: '/api/v1/todo/',
parse: function (response) {
return response.objects;
},
。。。
});
最后把 app-view.js和上面todos.js文件中的order改为id (这个id在tastypie中是个默认的int字段)
2)再运行django web服务器，尝试运行看看
TodoMVC已经由localstorage存取切换到用sqlLite数据库进行存取啦！哈哈
