zoukankan      html  css  js  c++  java
  • [Backbone]3. More detail on View

    Change the AppointmentView to have a top-level li tag (instead of the default div tag).

    var AppointmentView = Backbone.View.extend({tagName: 'li'});

    Make sure every AppointmentView top-level element is created with a class of appointment.

    var AppointmentView = Backbone.View.extend({
      tagName: 'li',
      className: 'appointment'
    });

    Refactor the render function below to use the improved jQuery syntax on the top-level element.

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

    Dr. Goodparts is getting ready to request some big changes to our AppointmentView. You know that eventually the HTML it generates is going to get pretty complicated, so now is probably a good time to refactor to use a template.

    Make sure you generate the same HTML after switching to templates.

    Tip: don't forget to use this.model.toJSON() in render

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

     to

    var AppointmentView = Backbone.View.extend({
      template : _.template('<span><%= title %></span>'),
      render: function(){
        var attr = this.model.toJSON();
        this.$el.html(this.template(attr));
      }
    });

    Dr. Goodparts is just getting the hang of this web thing and thinks it'd be a good idea to alert the user the title of the appointment whenever they click on its view.

    See if you can't appease his bad idea and implement this tragic UI interaction using View events.

    var AppointmentView = Backbone.View.extend({
      template: _.template('<span><%= title %></span>'),
      events: {
        "click": function(){alert(this.model.get('title'));}
      },
      render: function(){
        this.$el.html(this.template(this.model.toJSON()));
      }
    });

    Phew, over the weekend you convinced Dr. Goodparts to come to his senses and allow you to change the click event to only alert when the user double clicks on the view.

    Make those changes quick and deploy!

    var AppointmentView = Backbone.View.extend({
      template: _.template('<span><%= title %></span>'),
    
      events: { "dblclick span": "alertTitle" },
      alertTitle: function(){
        alert(this.model.get('title'));
      },
    
      render: function(){
        this.$el.html(this.template(this.model.toJSON()));
      }
    });

    -----------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({
      tagName: 'li',
      className: 'appointment',
      render: function(){
        this.$el.html('<span>' + this.model.get('title') + '</span>');
      }
    });*/
    //Using a better way to create html, underscore template
    //Always get data from model
    //render the data using this.model.toJSON() function
    var AppointmentView = Backbone.View.extend({
      template: _.template('<span><%= title %></span>'),
      events: { "dblclick span": "alertTitle" },
      alertTitle: function(){
        alert(this.model.get('title'));
      },
      render: function(){
        this.$el.html(this.template(this.model.toJSON()));
      }
    });
    //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);

     

  • 相关阅读:
    Asp.Net Core 2.0 项目实战(7)MD5加密、AES&DES对称加解密
    Asp.Net Core 2.0 项目实战(8)Core下缓存操作、序列化操作、JSON操作等Helper集合类
    Java后端开发-SSM框架的图片上传
    个人作业——软件工程实践总结&个人技术博客
    个人作业——软件评测
    结对第二次作业——某次疫情统计可视化的实现
    结对第一次—疫情统计可视化(原型设计)
    软工实践寒假作业(2/2)
    my codestyle
    alibaba-java-style-guide
  • 原文地址:https://www.cnblogs.com/Answer1215/p/3885816.html
Copyright © 2011-2022 走看看