R
R
RonnyXD2017-08-08 13:25:59
backbone.js
RonnyXD, 2017-08-08 13:25:59

How to make a route in BackBone so that the router works when there are GET parameters after it?

kk.new.dev/new/#registration/step8?cardRegLastRegi...
kk.new.dev/new/?cardRegLastRegistrationAuthTxRef=5
... the second option is normally processed, please tell me how to make both options work normally
, here is the route file itself:

window.App = {
  Views: {},
  Models: {},
  Collections: {},
  Router: {},
  Poupups: {}
};

App.Router = Backbone.Router.extend({
  routes: {
    '': 'index',
    'test': 'test',
    'registration': 'Registration',
    'registration/thanks': 'thanks',
    'registration/decline': 'decline',
    'registration/notfill': 'notfill',
    //"registration/:step8":  "regcard",
    'registration/:step': 'Registration',
    //'registration/:step?*': 'Registration'


  },
  regcard: function() {
    //если подтверждение карты
    this.getUrlVars();
    this.Registration('step8');
  },


  thanks: function() {
    var ob = this.get_view('thanks', App.Models);
    //console.log(ob);
    //$('.fox-copyright').remove();
    //$("#form_content").html(ob);
    //$("#form_content").addClass('hide');
    $('#parent_block').addClass('hide');
    $('#any_parent').html(ob);
    // $("#parent_block").addClass('hide');
    //$("#any_parent").html(ob);
    //console.log('suka');
  },
  decline: function() {
    var ob = this.get_view('decline', App.Models);
    //console.log(ob);
    //$('.fox-copyright').remove();
    //$("#form_content").html(ob);
    //$("#form_content").addClass('hide');
    $('#parent_block').addClass('hide');
    $('#any_parent').html(ob);
    // $("#parent_block").addClass('hide');
    //$("#any_parent").html(ob);
    //console.log('suka');
  },
  notfill: function() {
    //console.log('router----------');
    var ob = this.get_view('notFill', App.Models);
    //console.log(ob);
    //console.log('----------------------------tt');
    $('#parent_block').addClass('hide');
    $('#any_parent').html(ob);
  },

  Registration: function(step) {
    //console.log('---------- constrict data  in router');
    //console.log(step);
    //console.log(App.Models);

    var ob = this.get_view(step, App.Models);
    //console.log(ob);
    $('#form_content').html(ob);
    switch (step) {
      case 'step1':
        $('.phone__number').text(App.Models.get('phoneNumber'));
        $('#helper-save-email').val(App.Models.get('checkEMail'));
        //получить кодовое слово и записать в модель
        break;
    }

  },
  getUrlVars: function() {
    var vars = {};
    var conter = 0;
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
      vars[key] = value;
      conter++;
    });
    if (conter == 3) {
      //console.log('---------------------------cint' + conter);
      App.Models.regCardStatus = true;
      App.Models.blockSum = vars;
      return true;
    } else {
      //console.log('---------------------------cint' + conter);
      App.Models.regCardStatus = false;
      return false;
    }
    //turn vars;
  },


  get_view: function(step, model) {
    //console.log(App.Models);
    if (!App.Models) {
      App.Models.Models = model;
    }
    switch (step) {
      case 'step0':
        return new Step0View({
          model: App.Models
        }).el;
      case 'step1':
        return new Step1View({
          model: App.Models
        }).el;
      case 'step2':
        return new Step2View({
          model: App.Models
        }).el;
      case 'step3':
        return new Step3View({
          model: App.Models
        }).el;
      case 'step4':
        return new Step4View({
          model: App.Models
        }).el;
      case 'step5':
        return new Step5View({
          model: App.Models
        }).el;
      case 'step6':
        return new Step6View({
          model: App.Models
        }).el;
      case 'step7':
        return new Step7View({
          model: App.Models
        }).el;
      case 'step8':
        return new Step8View({
          model: App.Models
        }).el;
      case 'step9':
        return new Step9View({
          model: App.Models
        }).el;
      case 'thanks':
        return new ThanksPageView({
          model: App.Models
        }).el;
      case 'decline':
        return new DeclinePageView({
          model: App.Models
        }).el;
      case 'notFill':
        return new NotFill({
          model: App.Models
        }).el;
    }
  }
});


App.Template = {

  cache: {}, // здесь хранятся загруженные шаблоны
  pending: {}, // очередь callback-ов, которые необходимо вызвать после загрузки шаблона
  load: function(url, callback) {

    callback = callback || function() {};

    if (this.cache[url]) { //если шаблон уже загружен, просто вызовем callback
      callback(this.cache[url]);
      return;
    }

    // добавляем callback в очередь
    if (this.pending[url]) {
      this.pending[url].push(callback);
      return;
    }

    this.pending[url] = [callback];

    jQuery.ajax({ //загружаем шаблон
      url: url,
      dataType: 'text',
      complete: function(resp) {
        var cache =
          this.cache[url] = _.template(resp.responseText); // парсим и заносим в кеш

        _.each(this.pending[url], function(cb) { // обрабатываем очередь
          cb(cache);
        });

        delete this.pending[url]; // очищаем очередь
      }.bind(this),
      error: function() {
        throw new Error('Could not load ' + url);
      }
    });
  },
};

$(function() {
  tpl.loadTemplates(['step0', 'step1', 'step2', 'step3', 'step4', 'step5', 'step6', 'step7', 'step8', 'step9', 'ThanksPage', 'poupop1', 'notFill', 'decline'], function() {
    App.Router = new App.Router();
    App.Models = new RegStep0Model();

    Backbone.history.start();
  });
});

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question