Created
November 28, 2016 22:10
-
-
Save CheezItMan/733e901802f3915d2387a6509a59ac3d to your computer and use it in GitHub Desktop.
Backbone LiveCode - Adding a model in
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import $ from 'jquery'; | |
import Task from 'app/models/task'; | |
import TaskView from 'app/views/task_view'; | |
import TaskListView from 'app/views/task_list_view'; | |
import _ from 'underscore'; | |
var taskData = [ | |
{ | |
title: 'Mow the lawn', | |
description: 'Must be finished before BBQ on Sat afternoon' | |
}, { | |
title: 'Go to the Bank', | |
description: 'Need to make a transfer' | |
}, { | |
title: 'Tune the Piano', | |
description: 'High C is missing or something???' | |
} | |
]; | |
$(document).ready(function() { | |
var taskList = []; | |
for (var i = 0; i < taskData.length; i++) { | |
// Create each task with a title & description | |
var task = new Task(taskData[i]); | |
taskList.push(task); | |
} | |
var template = _.template($('#task-template').html()); | |
var myTaskListView = new TaskListView({taskData: taskList, template: template, el: $('.task-list')}); | |
myTaskListView.render(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<title>Task List</title> | |
<meta charset="utf-8"> | |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css"> | |
<link rel="stylesheet" href="styles/index.css"> | |
</head> | |
<body> | |
<main class="row"> | |
<section class="small-12 columns"> | |
<h1 class="title">Task List</h1> | |
</section> | |
<ul class="task-list small-12 large-6 columns end"> | |
</ul> | |
</main> | |
<script type="text/template" id="task-template"> | |
<li class="task"> | |
<h2> <%- task.title %></h2> | |
<p> <%- task.description %></p> | |
</li> | |
</script> | |
<script src="/app.bundle.js" charset="utf-8"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Backbone from 'backbone'; | |
var Task = Backbone.Model.extend( { | |
defaults: { | |
title: "Something to do", | |
description: "", | |
completed: false | |
} | |
}); | |
export default Task; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// task_list_view.js | |
import $ from 'jquery'; | |
import _ from 'underscore'; | |
import Backbone from 'backbone'; | |
import TaskView from 'app/views/task_view'; | |
var TaskListView = Backbone.View.extend({ | |
initialize: function(options) { | |
this.taskTemplate = _.template($('#task-template').html()); | |
this.taskData = options.taskData; | |
this.taskViews = []; | |
this.taskData.forEach(function(task) { | |
var taskView = new TaskView({ | |
task: task, | |
template: this.taskTemplate | |
}); | |
this.taskViews.push(taskView); | |
}, this); | |
}, | |
render: function() { | |
var that = this; | |
this.taskViews.forEach(function(taskView) { | |
that.$el.append(taskView.render().el); | |
}); | |
return this; | |
} | |
}); | |
export default TaskListView; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import $ from 'jquery'; | |
import _ from 'underscore'; | |
import Backbone from 'backbone'; | |
import Task from 'app/models/task'; | |
var TaskView = Backbone.View.extend({ | |
initialize: function(options) { | |
this.task = options.task; | |
this.template = options.template; | |
}, | |
render: function() { | |
// Notice that we've added .attributes | |
var html = this.template({task: this.task.attributes}); | |
this.$el.html(html); | |
// Enable chained calls | |
return this; | |
}, | |
getInput: function() { | |
var task = new Task({ | |
title: this.input.title.val(), | |
description: this.input.description.val() | |
}); | |
return task; | |
} | |
}); | |
export default TaskView; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment