zoukankan      html  css  js  c++  java
  • [Backbone] Customzing Backbone

    Convert the AppointmentForm view below to use Mustache templating. Make sure you remember to change the <%= %> placeholders with Mustache's {{}} placeholders.

    var AppointmentForm = Backbone.View.extend({
      template: Mustache.compile('<form>' + 
                           '<input name="title" type="text" value="{{title }}" />' + 
                           '<input name="name" type="text" value="{{ name }}" /></form>'),
    
      render: function(){
        this.$el.html(this.template(this.model.toJSON()));
        return this;
      }
    });

    As you can see in our Appointment view below, we are rendering the list of possible dates an appointment could occur. possibleDates is an attribute on the Appointment model, and it's value is always an array of strings.

    Convert the view below to use Mustache.

    App.Views.Appointment = Backbone.View.extend({
      template: Mustache.compile('<h2>{{ title }}</h2>' + 
                                 'Possible Dates: <ul>{{ #possibleDates  }}' +
                                 '<li>{{ . }}</li>' +
                                 '{{ /possibleDates  }}</ul>'),
      render: function(){
        this.$el.html(this.template(this.model.attributes));
        return this;
      }
    });

    possibleDates has changed from an Array of strings to an Array of objects with day and time properties. Update the Mustache template below to render the li tag with both day and time inside them, like so:

    <li>Tuesday at 3:00pm</li>

    App.Views.Appointment = Backbone.View.extend({
      template: Mustache.compile('<h2>{{ title }}</h2>' + 
        'Possible Dates: <ul>{{#possibleDates}}' +
                                 '<li>{{day}} at {{time}}</li>' +
        '{{/possibleDates}}</ul>'),
      
      render: function(){
        this.$el.html(this.template(this.model.attributes));
        return this;
      }
    });

    Dr. Goodparts has instituted a new (possibly controversial) policy: Appointments can not be changed. The office can create appointments, but they will no longer be able to update them or delete them.

    To comply with this new policy, modify the Appointment model's sync function below to only work on read andcreate, but not on delete and update.

    App.Models.Appointment = Backbone.Model.extend({
      sync: function(method, model, options){
        if (method === "read" || method === "create"){
          Backbone.sync(method, model, options);
        }else {
          console.log("Dr. Goodparts says no!");
        }
      }
    });

    Well that was quick. Dr. Goodparts has changed his mind and now wants to be able to update and delete appointments again. Unfortunately, the server team has defected to Dr. Jay Query and so we've had to use HTML5 localStorage to store our appointments.

    Below we've started to implement the localStorage strategy, handling the "read" and "create" methods. In this challenge, write the code to handle the "delete" method.

    App.Models.Appointment = Backbone.Model.extend({
      sync: function(method, model, options){
        options = options || {};
    
        switch(method){
          case 'delete':
            var key = "Appointment-" + model.id;
            localStorage.removeItem(key, JSON.stringify(model));
          break;
          case 'update':
          break;
          case 'create':
            var key = "Appointment-" + model.id;
            localStorage.setItem(key, JSON.stringify(model));
          break;
          case 'read':
            var key = "Appointment-" + model.id;
            var result = localStorage.getItem(key);
            if(result){
              result = JSON.parse(result);
              options.success && options.success(result);
            }else if(options.error){
              options.error("Couldn't find Appointment with id=" + model.id);
            }
          break;
        }
      }
    });

    Fantastic! Now to finish it up, all you need to do is implement the update case below. Use setItem andJSON.stringify, just like in the create case.

    App.Models.Appointment = Backbone.Model.extend({
      sync: function(method, model, options){
        options = options || {};
    
        switch(method){
          case "delete":
            var key = "Appointment-" + model.id;
            localStorage.removeItem(key);
            break;
          case "update":
            var key = "Appointment-" + model.id;
            localStorage.setItem(key, JSON.stringify(model));
            break;
          case "create":
            var key = "Appointment-" + model.id;
            localStorage.setItem(key, JSON.stringify(model));
            break;
          case "read":
            var key = "Appointment-" + model.id;
            var result = localStorage.getItem(key);
            if(result){
              result = JSON.parse(result);
              options.success && options.success(result);
            }else if(options.error){
              options.error("Couldn't find Appointment with id=" + model.id);
            }
            break;
        }
      }
    });
  • 相关阅读:
    [转]char、varchar、nchar、nvarchar的区别
    【转】Asp.net 2.0中页的生存周期(Lifecycle)和动态控件 [.Net]
    git免登录sshkey
    ios8,xcode6 周边
    iOS 推送证书
    Lazarus中TreeView导出XML以及XML导入TreeView
    flac文件提取专辑封面手记
    Lazarus解决含中文文件名或路径的使用问题
    使用PowerShell管理Windows8应用
    thbgm拆包【in progress】
  • 原文地址:https://www.cnblogs.com/Answer1215/p/3901386.html
Copyright © 2011-2022 走看看