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); 
        }
      }
    });
  • 相关阅读:
    面试java_后端面经_5
    头条后端面经_1面
    面试java后端面经_2
    java后端开发面经 数据库相关
    用友java后端开发面经
    面试java后端面经_4
    维恩贝特面试JAVA后台开发
    面试java后端面经_3
    世纪龙校招java开发一、二面 面经
    AndroidWebView使用
  • 原文地址:https://www.cnblogs.com/Answer1215/p/3900282.html
Copyright © 2011-2022 走看看