js__backbone__codeschool1/web/client/src/todos.js

/**
 * @see Model.url
 */
$(function () {
  const onChange = (change, x) => {
    console.log('On change', change.changed);
  };

  // Create a model class.
  const TodoItem = Backbone.Model.extend({
    defaults: {
      description: "Empty todo",
      status: "incomplete",
    },
    // RESTful web service, RoR flavor.
    urlRoot: '/server/todos',

    toggleStatus(view) {
      if (this.get('status') === 'incomplete') {
        this.set('status', 'complete');
      }
      else {
        this.set('status', 'incomplete');
      }
      this.save();
    }
  }
  );

  // Create a model instance to load it by ID. Let it be global for console use.
  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 });

  // Manipulate attributes.
  const description = todoItem.get('description');
  todoItem.set('status', 'complete');

  // 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.
    //language=HTML
    template: _.template(`
<h3 class="<%= status %>">   
  <input type="checkbox" 
    <% if (status === "complete") print("checked") %> /> 
  <%= description %>
</h3>
`),


    events: {
      // Generates this.$el.('h3", 'click', alertStatus).
      'click h3': 'alertStatus',

      'change input': 'toggleStatus',
    },

    // Backbone.
    initialize() {
      // Backbone on() takes (event, callback, context)
      this.model.on('change', this.render, this);
      // Or without an explicit context, use a bound function.
      // this.model.on('change', this.render.bind(this));
      this.model.on('destroy', this.remove, this);
    },

    // Handle on destroy.
    remove() {
      this.$el.remove();
    },

    // Handle "click h3"
    alertStatus() {
      // Noisy.
      // alert('Hey, you clicked the H3');
    },

    // Handle "change input".
    toggleStatus() {
      this.model.toggleStatus();
    },

    render: function () {
      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);
});