Skip to content

Instantly share code, notes, and snippets.

@CheezItMan
Created November 28, 2016 22:10
Show Gist options
  • Save CheezItMan/733e901802f3915d2387a6509a59ac3d to your computer and use it in GitHub Desktop.
Save CheezItMan/733e901802f3915d2387a6509a59ac3d to your computer and use it in GitHub Desktop.
Backbone LiveCode - Adding a model in
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();
});
<!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>
import Backbone from 'backbone';
var Task = Backbone.Model.extend( {
defaults: {
title: "Something to do",
description: "",
completed: false
}
});
export default Task;
// 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;
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