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); 
        }
      }
    });
  • 相关阅读:
    Unix网络编程中的五种IO模型
    go工具库分析——go-snowflake
    defer
    滑动窗口
    快速幂
    Golang使用注意点
    微服务数据一致性基础认知
    KMP算法
    单调栈和单调队列
    LRU简单学习
  • 原文地址:https://www.cnblogs.com/Answer1215/p/3900282.html
Copyright © 2011-2022 走看看