zoukankan      html  css  js  c++  java
  • [Backbone]1. Module, View classed

    Welcome to the Anatomy of Backbone.js challenges! We're going to be building a simple Appointment app for our friend, Dr. Goodparts.

    So, let's get started and create an Appointment model class.

    var Appointment = Backbone.Model.extend({});

    Now that we have our Appointment model class, let's create our first instance and assign it to the appointmentvariable. Pass in a title for the appointment when creating it.

    Note Check out the JS Source tab below that will display relevant code for this challenge.

    //Define a object for model
    var appointment = new Appointment({'title': "New appointment"});

    Well look at that, we have our very first appointment. But it isn't so useful, sitting there deep down in the bowels of your browser. To display it lets first create a view class and name it AppointmentView.

    //Create a View CLASS
    var AppointmentView = Backbone.View.extend({});

    The perfect place to put our display code now exists! Now it's time to create our first AppointmentView instance. When doing so, don't forget to include the appointment model instance we just created. Assign the instance to a variable.

    var appointmentView = new AppointmentView({model: appointment });

    Our AppointmentView instance is almost ready, all we have to do is go back and define the AppointmentViewrender function so we can actually create some HTML. Have the render function add an <li> tag to the top-level element of the view. Use this.model.get('title') as the content of the <li>.

    var AppointmentView = Backbone.View.extend({
      render: function(){
          var html = '<li>'+this.model.get('title')+'</li>';
        $(this.el).html(html);
      }
    });

    Almost there, but before we display anything let's set the title of the appointment instance! Set it to any string, perhaps something you'd like Dr. Goodparts to take a look at (ex. My Backbone Hurts).

    appointment.set('title', "Nice to meet you!");

    Time to show Dr. Goodparts his first appointment. Render the appointmentView instance and then insert its top-level element into #app using $('#app').html().

    //Show the final view
    appointmentView.render(); 
    $('#app').html(appointmentView.el);

    -----Final code----

    //Create a model CLASS    
    var Appointment = Backbone.Model.extend({});
    //Define a object for model
    var appointment = new Appointment({'title': "New appointment"});
    //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);
  • 相关阅读:
    display:inline-block 什么时候不会显示间隙?
    js数组算法题01
    redux中的reducer为什么必须(最好)是纯函数
    如何实现 token 加密
    已知如下代码,如何修改才能让图片宽度为 300px ?注意下面代码不可修改。
    分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
    Vue 的响应式原理中 Object.defineProperty 有什么缺陷?
    JAVA课程实验报告 实验二 Java面向对象程序设计
    Java课程实验报告 实验一 Java开发环境的熟悉
    [题解] Luogu P5641 【CSGRound2】开拓者的卓识
  • 原文地址:https://www.cnblogs.com/Answer1215/p/3885563.html
Copyright © 2011-2022 走看看