Backbone Collection Saves - Collection Meta data
Dealing with objects with nested collections and saving the collections.
by mwagner72
HTML
<script src="https://raw.github.com/documentcloud/underscore/1.1.7/underscore.js"></script>
<script src="https://raw.github.com/mwagner72/JSON-js/master/json2.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/0.5.3/backbone.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.modelbinding/v0.2.1/backbone.modelbinding.js"></script>
<script src="https://raw.github.com/jashkenas/coffee-script/master/extras/coffee-script.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/coffeescript">
window.TodoApp =
Models: {}
Collections: {}
Routers: {}
Views: {}
#Item Model
class TodoApp.Models.TodoItem extends Backbone.Model
#Item Collection
class TodoApp.Collections.TodoList extends Backbone.Collection
model: TodoApp.Models.TodoItem
sync: (method, model, options) ->
type = "POST"
params = _.extend({type: type, dataType: 'json'}, options)
params.data = { json: JSON.stringify([{id: 1, task: 'task 1'}, {id: 3, task: 'Task 3'}, {id: 2, task: 'Task 2'}])}
params.url = '/echo/json/'
return new $.ajax(params)
#App Controller Model
class TodoApp.Models.Todo extends Backbone.Model
initialize : () ->
console.log('Todo App init')
@todoList = new TodoApp.Collections.TodoList
TodoApp.Views.TodoItems ||= {}
class TodoApp.Views.TodoItems.ItemView extends Backbone.View
tagName: "li"
template: $('#todo-item-template')
render: (model) ->
$(@el).html(@template.tmpl())
TodoApp.Views.TodoList ||= {}
class TodoApp.Views.TodoList.ListView extends Backbone.View
tagName: "ul"
initialize: (options) ->
@collection = options.collection
render: () ->
console.log('rendering list view')
view = new TodoApp.Views.TodoItems.ItemView(model: @model)
$(@el).append(view.render())
class TodoApp.Views.TodoList.AppView extends Backbone.View
initialize: (options) ->
_.bindAll...
JavaScript
$(function() {
//var myTodo = new TodoApp.Models.TodoList({el: $('#mydiv')})
var myView = new TodoApp.Views.TodoList.AppView({
el: $('#mydiv'),
model: new TodoApp.Models.Todo()
});
});