zoukankan      html  css  js  c++  java
  • [Backbone]2. More detail in Models

    Our Appointment model doesn't seem too useful yet. Add two default attributes, title as the string "Checkup", anddate which should default to the current time new Date().

    var Appointment = Backbone.Model.extend({
      defaults:{
      "title": "Checkup",
      "date": new Date()
      }
    });

    While messing around in the console, you've discovered a strange bug. Every new Appointment you create has the same exact date, instead of the date and time of when the Appointment instance was created.

    This is because new Date() is evaluated once, when the Appointment model is first created, and not re-evaluated every time a new instance is created.

    To fix this you'll want to assign a function to defaults instead of just a plain object. Wrap the object below in a function which returns the object. This will cause the defaults to get evaluated every time a new instance is created.

    var Appointment = Backbone.Model.extend({
      defaults : function(){
        return {
          title: 'Checkup',
          date: new Date
        }
      }
    });

    Dr. Goodparts finally ponied up for a server and has seeded it with his first few appointments. Luckily for us, he bought the REST package with the JSON add-on.

    Point the root URL of your Appointment model to the /appointments endpoint.

    Then, create a new Appointment with an id of 1, and fetch its data from the server.

    var Appointment = Backbone.Model.extend({urlRoot: '/appointments'});
    var appointment = new Appointment({id: 1});
    appointment.fetch();

    Setting the urlRoot of the Appointment model lets us do more than just fetch from the server, it also lets us sync changes made to model instances.

    Dr. Goodparts isn't feeling good today so we're going to have to cancel his appointments. Set the appointment'scancelled attribute to true and save the appointment to the server.

    var appointment = new Appointment({id: 1});
    appointment.set("cancelled", true);
    //save it to server.
    appointment.save();    

    Dr. Goodparts is upset that he wasn't notified when we changed his last appointment to cancelled.

    Add a listener to the appointment model instance to pop-up an alert box (using alert) whenever any of the model attributes change.

    var appointment = new Appointment({id: 1});
    appointment.on('change', function(){
        alert("Appointment cancelled!");
    });

    Dr. Goodparts browser crashed because of too many alerts.

    Instead of listening for all attribute changes, just listen and alert when changes are made to the cancelled attribute.

    appointment.on('change:cancelled', function(){
          alert("Hey Dr. Goodparts, your appointment has changed!");
    });

    We've already seen how we can use get to access attributes on a model instance, but what if we wanted them all at once?

    Use the console.log function to log the JSON of the appointment instance using toJSON. If you don't remember howtoJSON works, consult the Backbone Model docs.

    var appointment = new Appointment({id: 1});
    console.log(appointment.toJSON());

    -----------Final Code--------------

    //Create a model CLASS    
    var Appointment = Backbone.Model.extend({
      defaults : function(){
        return {
          title: 'Checkup',
          date: new Date()
        }
      }
    });
    //Define a object for model
    var Appointment = Backbone.Model.extend({urlRoot: '/appointments'});
    var appointment = new Appointment({id: 1});
    appointment.fetch();
    console.log(appointment.toJSON());
    /*
    appointment.on('change', function(){
      alert("Hey Dr. Goodparts, your appointment has changed!");
    });*/
    appointment.on('change:cancelled', function(){
          alert("Hey Dr. Goodparts, your appointment has changed!");
    });
    /*
        If you want to set attribute
        appointment.set("cancelled", true);
        //save it to server.
        appointment.save();    
    */
    //Create a View CLASS
    var AppointmentView = Backbone.View.extend({
      render: function(){
          var html = '<li>'+this.model.get('title')+'</li>';
        $(this.el).html(html);
      }
    });
    //create a view object, include the model instance
    var appointmentView = new AppointmentView({model: appointment });
    //set title
    appointment.set('title', "Nice to meet you!");
    //Show the final view
    appointmentView.render(); 
    $('#app').html(appointmentView.el);
  • 相关阅读:
    Exception in thread "main" java.util.MissingFormatArgumentException: Format specifier 's'
    抓报错SQL
    10.3.4 direct path read and direct path read temp
    武道与健身——北漂18年(80)
    jquery选择器 之 获取父级元素、同级元素、子元素
    JQuery Show()的几种效果 总有一种是你需要的
    Add method not implemented
    MySQL server version for the right syntax to use near 'info where info.stu_id = 1' at line 1
    Mapped Statements collection does not contain value for WaitMissionMapper.updateWait
    Cause: org.xml.sax.SAXParseException; lineNumber: 32; columnNumber: 14; 注释中不允许出现字符串 "--"
  • 原文地址:https://www.cnblogs.com/Answer1215/p/3885697.html
Copyright © 2011-2022 走看看