zoukankan      html  css  js  c++  java
  • [Backbone] Verying Views

    Below we have our AppointmentsView instance rendering and then taking the rendered HTML and inserting into the$('#app') element.

    Change the code to instead pass in the $('#app') element into the view constructor to make it theappointmentsView.el.

    var appointmentsView = new AppointmentsView({collection: appointments, el: $('#app')});
    appointmentsView.render();

    Update the AppointmentsView class to handle the extra option doctor passed into the constructor, like so: new AppointmentsView({collection: appointments, doctor: drGoodparts}) Assign the extra option to thedoctor property on the view instance.

    var AppointmentsView = Backbone.View.extend({
      initialize: function(options){
          this.doctor = options.doctor;
      }
    });

    Dr. Goodparts recently hired an intern to input appointments and they've been injecting appointments with malicious titles to hack Dr. Goodparts' computer.

    The intern was fired but you should probably update the AppointmentView to escape the title content.

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

    As you can see in the view code below, whenever the model's title attribute changes, we update the title in the view and highlight it to let the user know that it's been updated. Sometimes we want to be able to change the title without highlighting the view, but with still updating it in the view.

    To accomplish this, we are passing in {highlight: false}. Update the changedTitle function below to use this extra option to selectively highlight the view.

    var AppointmentView = Backbone.View.extend({
      template: _.template("<span><%= title %></span>"),
      initialize: function(){
            this.model.on('change:title', this.changedTitle, this);
      },
      render: function(){
        this.$el.html(this.template(this.model.attributes));
      },
      changedTitle: function(model, value, option){
        this.$('span').html(value);
        if(option.highlight!=false){
          this.$el.effect('highlight', {}, 1000);
        }    
      }
    });

    Use the new listenTo View function to make the view listen to the model's 'change:title' event, instead of having the model notify the view of the event. This way we can safely call remove() on the view and feel confident all of our events are cleaned up.

    var AppointmentView = Backbone.View.extend({
      template: _.template("<span><%= title %></span>"),
      initialize: function(){
        this.listenTo(this.model, 'change:title', this.render);
      },
      render: function(){
        this.$el.html(this.template(this.model.attributes));
      },
      changedTitle: function(model, value, options){
        this.$('span').html(value);
    
        if (options.highlight !== false){
          this.$el.effect('highlight', {}, 1000); 
        }
      }
    });
  • 相关阅读:
    Android popupwindow 失去焦点或者点击空白区域时消失的解决方法
    九度 题目1394:五连击数组
    地市级地铁数据管理信息系统解决方式
    用位运算实现两个整数的加法运算
    Leaflet--建设移动设备友好的互动地图
    atitit.自适应设计悬浮图片的大小and 位置
    PIM-DM协议内核触发机制及协议执行机制记录
    整合struts2+spring+hibernate
    UITableViewCell的prepareForReuse方法
    《linux 内核全然剖析》编译linux 0.12 内核 Ubuntu 64bits 环境
  • 原文地址:https://www.cnblogs.com/Answer1215/p/3900282.html
Copyright © 2011-2022 走看看