zoukankan      html  css  js  c++  java
  • [Backbone]7. Collection Views, Custom Events

    It's finally time to start building out our Appointment app. We're going to be using a collection and a collection view to display a list of appointments to the ornery but brilliant Dr. Goodparts.

    Let's start by creating a View Class named AppointmentListView and then create an instance of that class, passing in our collection instance appointments

    var Appointment = Backbone.Model.extend({});
     
    var AppointmentList = Backbone.Collection.extend({
      model: Appointment
    });

    Answer:

    var appointments = new AppointmentList();
    var AppointmentListView = Backbone.View.extend({});
    var appointmentListView = new AppointmentListView({collection: appointments });

    Good morning. Last night you were so close to implementing the render function on AppointmentListView but decided to take a nap, and here you are!

    Go ahead and implement the addOne function, rendering an AppointmentView for each model in the collection, and appending it to the collection view's top-level element.

    Note There is a bug in the forEach call. Make sure and fix it before submitting.

    var Appointment = Backbone.Model.extend({});
    var AppointmentList = Backbone.Collection.extend({
        model: Appointment
    });
    var AppointmentView = Backbone.View.extend({
        template: _.template('<span class="<%= if(cancelled){
            print("cancelled");
        } %>" + '<%= title %></span>'> + '<a href="#">x</a>'),
        
        render: function(){
            this.$el.html(this.tamplate(this.model.toJSON()));
            return this;
        }
    });

    Answer:

    var AppointmentListView = Backbone.View.extend({
      render: function(){
        this.collection.forEach(this.addOne,this);
      },
      addOne: function(model){
        var appointmentView = new AppointmentView({model: model});
        this.$el.append(appointmentView.render().el);
      }
    });

    Wow, you are a hard worker! Let's see it pay off by rendering our collection view and inserting it into the DOM. Using theappend or html jQuery methods, insert the top-level element into the #app div.

    var appointmentsView = new AppointmentListView({collection: appointmentList});
    $("#app").append(appointmentsView.render().el);

    Uh oh. Dr. Goodparts is at it again, adding new models to the collection, and he's upset because when he adds a model, the DOM isn't updated.

    In the AppointmentListView's initialize function, listen for the collections add event and call the addOnefunction to append the new model to the view.

    Make sure you include the context argument to ensure addOne is called with the correct context.

    var AppointmentListView = Backbone.View.extend({
      initialize: function(){
        this.collection.on('add', this.addOne, this);
      },
      render: function(){
        this.collection.forEach(this.addOne, this);
      },
      addOne: function(model){
        var appointmentView = new AppointmentView({model: model});
        appointmentView.render();
        this.$el.append(appointmentView.el);
      }
    });

    It's Monday morning and time to reset all the appointments for the week. You hear a screech from down the hall and seconds later Dr. Goodparts barges red-faced into your office because the DOM didn't update when he reset the collection.

    Update the AppointmentListView to listen for the collection's reset event to call the render function.

    Make sure you include the context argument to ensure render is called with the correct context.

    var AppointmentListView = Backbone.View.extend({
      initialize: function(){
        this.collection.on('add', this.addOne, this);
        this.collection.on('reset', this.render, this);
      },
      render: function(){
        this.collection.forEach(this.addOne, this);
      },
      addOne: function(model){
        var appointmentView = new AppointmentView({model: model});
        appointmentView.render();
        this.$el.append(appointmentView.el);
      }
    });

    Turns out one of the appointments in our collection was rescheduled for next week, but when Dr. Goodparts removed the appointment model from the collection, it wasn't removed from the DOM. You can imagine Dr. Goodparts reaction.

    Fix this bug by using a custom event hide on Appointment models.

    Update your AppointmentList collection to trigger the hide event on a model when it is removed.

    Update your AppointmentView to call the remove function whenever its model fires the hide event.

    Appointment_list.js

    var AppointmentList = Backbone.Collection.extend({
      model: Appointment,
      initialize: function(){
           this.on('remove', this.hideModel);
      },
      hideModel: function(model){
        model.trigger('hide');
      }
    });

    Appointment_view.js

    var AppointmentView = Backbone.View.extend({
      initialize: function(){
        this.model.on('hide', this.remove, this);
      },
      remove: function(){
        this.$el.remove();
      }
    });
  • 相关阅读:
    go调查内存泄漏
    c++ 使用模板按类型统计stl多维容器中元素的数量
    phxpaxos遇到反复拉取checkpoint但是反复失败的问题,给其它节点造成压力
    phxpaxos实现状态机CAS操作
    使用phxpaxos开发过程中遇到的坑
    std::condition_variable::wait_until segment
    c++ protected 访问限定
    c++多态
    IO多路复用的水平触发与边缘触发
    Redis 源码分析系列1-main函数相关调用分析
  • 原文地址:https://www.cnblogs.com/Answer1215/p/3889232.html
Copyright © 2011-2022 走看看