Антон Ларкин

Backbone.js и Django REST framework

18 Sep 2013

Проходя курс Connected to the Backbone я использовал Django REST framework для построения простого апи, которое затем использовал в backbone приложении.

В backbone приложение мы используем простую модель для примера, а также добавим коллекцию для большей наглядности.

App.Models.Task = Backbone.Model.extend({
    defaults: {
        title: '',
        is_completed: false
    },
    urlRoot: '/tasks/'
});

App.Collections.Tasks = Backbone.Collection.extend({
    model: App.Models.Task,
    url: 'tasks/'
});

Модель в django приложении будет подоба нашей модели в backbone приложении.

class Task(models.Model):
    title = models.CharField('Title', max_length=1000)
    is_completed = models.BooleanField('Is completed', default=False)

Теперь нам нужно создать сериализатор для нашей модели задач и отображение для него.

class Task(models.Model):
    title = models.CharField('Title', max_length=1000)
    is_completed = models.BooleanField('Is completed', default=False)

class TaskViewSet(viewsets.ModelViewSet):
    model = Task
    serializer_class = TaskSerializer

Ну а затем самое главное, а именно урлы для работы с данными.

router = routers.DefaultRouter()
router.register(r'tasks', views.TaskViewSet)

urlpatterns = patterns('',
    url(r'^$', 'app.views.home', name='Home'),
    url(r'', include(router.urls)),
)

Далее добавим в базу несколько записей с которыми дальше будем работать.

[
    {'title': 'Begin write this posts', 'is_completed': 'true'},
    {'title': 'Go to the shops', 'is_completed': 'false'},
    {'title': 'Buy a new MacBook Pro', 'is_completed': 'false'}
]

Теперь можно проверить нашу модель и коллекцию в backbone приложении.

> var task = new App.Models.Task({id: 2});
> task.toJSON();
  Object {id: 2, title: "", is_completed: false}
> task.fetch();
> task.toJSON();
  Object {id: 2, title: "Go to the shops", is_completed: false}

> collections = new App.Collections.Tasks();
> collections.fetch();
> collections.toJSON();
  [Object, Object, Object]

Исходный код вы можете найти на гитхабе.

Похожие посты