|
|
@@ -1,12 +1,43 @@
|
|
|
+/**
|
|
|
+ * @see Model.url
|
|
|
+ */
|
|
|
$(function () {
|
|
|
+ const onChange = (...args) => {
|
|
|
+ console.log('On change', args, TodoItem);
|
|
|
+ };
|
|
|
+
|
|
|
// Create a model class.
|
|
|
const TodoItem = Backbone.Model.extend({
|
|
|
+ defaults: {
|
|
|
+ description: "Empty todo",
|
|
|
+ status: "incomplete",
|
|
|
+ },
|
|
|
// RESTful web service, RoR flavor.
|
|
|
urlRoot: '/server/todos',
|
|
|
});
|
|
|
+
|
|
|
// Create a model instance to load it by ID.
|
|
|
const todoItem = new TodoItem({ id: 1 });
|
|
|
|
|
|
+ // Listeners
|
|
|
+ todoItem.on('change', onChange);
|
|
|
+ // Skip listener during a change. Notice the value format.
|
|
|
+ todoItem.set({ 'description': 'some other description' }, {silent: true});
|
|
|
+ // Remove listener.
|
|
|
+ //todoItem.off('change', onChange);
|
|
|
+
|
|
|
+ /* Built-in events
|
|
|
+ change - when any attribute is modified
|
|
|
+ change:<attr> - when <attr> is modified
|
|
|
+ destroy - when the model is destroyed
|
|
|
+ sync - when the model successfully synced with the server
|
|
|
+ error - when model save or validation fails
|
|
|
+ all - on any event
|
|
|
+ */
|
|
|
+
|
|
|
+ // Check default attribute pre-fetch.
|
|
|
+ const defaultDescription = todoItem.get('description');
|
|
|
+
|
|
|
// Access the server at /server/todos/1 (urlRoot + '/' + item.id).
|
|
|
const x = todoItem.fetch({ async: false });
|
|
|
|
|
|
@@ -17,16 +48,47 @@ $(function () {
|
|
|
// Save on server.
|
|
|
todoItem.save();
|
|
|
|
|
|
+ // Destroy on server.
|
|
|
+ // todoItem.destroy();
|
|
|
+
|
|
|
// Create a view class.
|
|
|
const TodoView = Backbone.View.extend({
|
|
|
+ tagName: 'article',
|
|
|
+ id: 'todo-view',
|
|
|
+ className: 'todo',
|
|
|
+
|
|
|
+ // Underscore templating.
|
|
|
+ template: _.template('<h3><%= description %></h3>'),
|
|
|
+
|
|
|
+ events: {
|
|
|
+ // Generates this.$el.('h3", 'click', alertStatus).
|
|
|
+ 'click h3': 'alertStatus',
|
|
|
+ },
|
|
|
+
|
|
|
+ alertStatus() {
|
|
|
+ alert('Hey, you clicked the H3');
|
|
|
+ },
|
|
|
+
|
|
|
render: function () {
|
|
|
- const html = '<h3>' + this.model.get('description') + '</h3>';
|
|
|
- $(this.el).html(html);
|
|
|
+ const attributes = this.model.toJSON();
|
|
|
+ const html = this.template(attributes);
|
|
|
+ // Since this.el is a DOMElement, we can just wrap it with jQuery instead
|
|
|
+ // of using a jQuery selector like $('#todo-view') or $('.todo').
|
|
|
+ // This is better because it is id- and class- independent.
|
|
|
+ // $(this.el).html(html);
|
|
|
+ // Backbone even gives a shortcut: the $el property.
|
|
|
+ this.$el.html(html);
|
|
|
},
|
|
|
});
|
|
|
+
|
|
|
// Create a view instance.
|
|
|
const todoView = new TodoView({ model: todoItem });
|
|
|
+
|
|
|
+ // Build view.
|
|
|
todoView.render();
|
|
|
+ // console.log(todoView.el);
|
|
|
+
|
|
|
+ // Apply to the DOM.
|
|
|
$('#app').html(todoView.el);
|
|
|
});
|
|
|
|
