<commit_before>// Create a Todo model
var Todo = Backbone.Model.extend({
  defaults: {
    title: '',
    completed: false
  },

  // Validates the model
  validate: function (attributes) {
    console.log("Validating: ", attributes);

    if(!attributes.title) {
      return "Title can't be blank";
    }
  },
});

var todo = new Todo({
  title: "Try out the model and its attributes in console log."
});

// Each todo item will be rendered on the page using
// a todo view

// Create a Todo view
// 
// Properties:
//  a. tagName
//  b. events
//  c. initialize
//  d. render
var TodoView = Backbone.View.extend({
  tagName: 'li',

  todoTmpl: _.template($('#itemTemplate').html()),

  events: {
    'dblclick label': 'edit',
    'keydown .edit': 'updateOnEnter',
    'blur .edit': 'close',
    'change .status': 'taskCompleted'
  },

  // Called when the view is first created
  initialize: function () {
    // The main element for this view?
    var _view = this;

    // this.$el = $("#todo");
    this.model.on('change', function () {
      _view.render();
      console.log("Model changed");
    });
  },

  // Render the view
  render: function () {
    var todoItem = this.todoTmpl(this.model.toJSON());
    
    this.$el.html(todoItem);

    this.input = this.$(".edit");
    return this;
  },

  // Edit the title
  edit: function () {
    this.input
      .removeClass("hide")
      .focus()
      .prev('label').hide();
    
    console.log("Edit Todo!");
  },

  // Update the title on enter
  updateOnEnter: function (event) {
    var ENTER_KEY = 13;

    if(event.keyCode === ENTER_KEY) {
      this.model.set({ title: this.input.val() });
      console.log("Updated!", this.model);
      this.close(event);
    }
  },

  // Close editing mode of title
  close: function () {
    this.input
      .addClass("hide")
      .prev("label").show();
    
    console.log("Close!", event);
    event.stopPropagation();
  },

  // Check off the task from list
  taskCompleted: function () {
    this.model.set({ completed: this.$('.status')[0].checked });
    console.log("Task completed!", this);
  }
});

var todoView = new TodoView({ model: todo });
// $("#todo").append(todoView.render().el);

// Cant understand the mapping between a model and a view
// More specifically, cant understand the cardinality between them

// Mapping:
//  a. container => view container


// DONT THINK IN TERMS OF TRADITIONAL MVC

// MODEL => MODEL
// VIEW => TEMPLATE
// CONTROLLER => VIEW

var TodoCollection = Backbone.Collection.extend({
  model: Todo
});

var todoList = new TodoCollection([
  { id: 1, title: "Single Model and View", completed: true, },
  { id: 2, title: "Collection of model", completed: true },
  { id: 3, title: "Fix problem in update event", completed: true }
]).on("add", function (todo) {<commit_msg>Fixed the update collection issue. Also cleaned up duplication in views.<commit_after>// Create a Todo model
var Todo = Backbone.Model.extend({
  defaults: {
    title: '',
    completed: false
  },

  // Validates the model
  validate: function (attributes) {
    console.log("Validating: ", attributes);

    if(!attributes.title) {
      return "Title can't be blank";
    }
  },
});

var todo = new Todo({
  title: "Try out the model and its attributes in console log."
});

// Each todo item will be rendered on the page using
// a todo view

// Create a Todo view
// 
// Properties:
//  a. tagName
//  b. events
//  c. initialize
//  d. render
var TodoView = Backbone.View.extend({
  tagName: 'li',

  todoTmpl: _.template($('#itemTemplate').html()),

  events: {
    'dblclick label': 'edit',
    'keydown .edit': 'updateOnEnter',
    'blur .edit': 'close',
    'change .status': 'taskCompleted'
  },

  // Called when the view is first created
  initialize: function () {
    // The main element for this view?
    var _view = this;

    // this.$el = $("#todo");
    this.model.on('change', function () {
      _view.render();
      console.log("Model changed");
    });
  },

  // Render the view
  render: function () {
    var todoItem = this.todoTmpl(this.model.toJSON());
    
    this.$el.html(todoItem);

    this.input = this.$(".edit");
    return this;
  },

  // Edit the title
  edit: function () {
    this.input
      .removeClass("hide")
      .focus()
      .prev('label').hide();
    
    console.log("Edit Todo!");
  },

  // Update the title on enter
  updateOnEnter: function (event) {
    var ENTER_KEY = 13, message = false;

    if(event.keyCode !== ENTER_KEY) return;

    message = this.model.set({
      title: this.input.val()
    }, { validate: true });

    if(message) {  
      console.log("Updated!", this.model);
      this.close(event);
    } else {
      console.log("Error: ", this.model);
    }
  },

  // Close editing mode of title
  close: function () {
    this.input
      .addClass("hide")
      .prev("label").show();
    
    console.log("Close!", event);
    event.stopPropagation();
  },

  // Check off the task from list
  taskCompleted: function () {
    this.model.set({ 
      completed: this.$('.status')[0].checked
    });
    console.log("Task completed!", this);
  }
});

var todoView = new TodoView({ model: todo });
// $("#todo").append(todoView.render().el);

// Cant understand the mapping between a model and a view
// More specifically, cant understand the cardinality between them

// Mapping:
//  a. container => view container


// DONT THINK IN TERMS OF TRADITIONAL MVC

// MODEL => MODEL
// VIEW => TEMPLATE
// CONTROLLER => VIEW

var TodoCollection = Backbone.Collection.extend({
  model: Todo
});

var todoList = new TodoCollection([
  { id: 1, title: "Single Model and View", completed: true, },
  { id: 2, title: "Collection of model", completed: true },
  { id: 3, title: "Fix problem in update event", completed: true }
]).on("add", function (todo) {
{'fraction_non_alphanumeric': 0.16239754098360656, 'fraction_numerical': 0.0020491803278688526, 'mean_word_length': 2.6999368288060643, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '163528', 'n_tokens_mistral': 1906, 'n_tokens_neox': 1843, 'n_words': 548}