Как сохранить значения TextBox на стороне клиента с помощью мастера «Далее» и «Назад»?

Question

Я нашел здесь замечательного мастера jQuery Блог Джерода Санто , который отвечает моим потребностям. Я добавил TextBox на первом шаге, чтобы проверить его.

Когда я добавил какое-то значение в текстовое поле, щелкнул следующий, а затем вернулся Я потерял ценность.

Вот мое демо , а вот источник код Есть ли способ сохранить эти значения на стороне клиента, не переходя на сервер с вызовами ajax. Я думаю, что проблема может быть в сокрытии контента. Как вы думаете, есть решение для этого?

Обновление : я создал свой собственный мастер jQuery, который выполняет эту работу. Я отправлю это как ответ рано или поздно.

Answer 1

Вот решение. Я полностью изменил код и создал свой собственный мастер. Демо и исходный код доступны.

Answer 2

Здесь вам нужно сохранить отображение состояния мастера и некоторые значения атрибутов для этого конкретного состояния. Я не помню точное место, откуда я использовал этот код. Но вот некоторые фрагменты, которые вам пригодятся.

Реализация карты в JS

Map = function(){
  this._dict = [];
}
Map.prototype._get = function(key){
  for(var i=0, couplet; couplet = this._dict[i]; i++){
    if(couplet[0] === key){
      return couplet;
    }
  }
}
Map.prototype.put = function(key, value){
  var couplet = this._get(key);
  if(couplet){
    couplet[1] = value;
  }else{
    this._dict.push([key, value]);
  }
  return this; // for chaining
}
Map.prototype.get = function(key){
  var couplet = this._get(key);
  if(couplet){
    return couplet[1];
  }
}

Затем я использовал Реализацию класса Джона Резига, чтобы написать FlowManager, который обрабатывает все мастера.

var FlowManager = Class.extend({
  init: function(screenList){
    this.screenArray = screenList;
    this._currentIndex = 0;
    this.currentScreen = this.screenArray[this._currentIndex];
    this.map = new Map();
    this.loadFunctionMap = new Map();
  },

  getCurrentScreen: function(){
    return this.currentScreen;
  },
  _onload: function(){    
      //TODO
  },
  loadDefaultScreen: function(){
        this._currentIndex=0;
        this.currentScreen = this.screenArray[this._currentIndex];
        this.render();    
  },
  loadScreen: function(screenName){

  },   
  _next: function(){

  },
  _previous: function(){

  },
  render: function(){
        //  your logic
  },  
  loadNextScreen: function(){
        this._next();
        this.render();    
  },
  loadPrevScreen: function(){
        this._previous();
        this.render();
  }
  // any other utility functions
});

Затем я могу вызвать его, как показано ниже.

var CreatePackageFlow = FlowManager.extend({
      init: function(screenList){
        this._super(screenList);
        //global map data for screens
        this.map.put("UploadPackageSubtitle","Create New Package : Upload Resources");      
        this.map.put("SummarySubtitle","Create New Package : Summary");
      },
      //onload screen functions TODO: auto-invoke them on screen navigation
      _CreatePackage : function(){
      },
      _UploadPackage : function(){
      },
      _PackageSummary : function(){       
      }
});

и

newPackageFlow = new CreatePackageFlow(["CreatePackage","UploadPackage","PackageSummary"]);
newPackageFlow.render();

Я надеюсь, вы поймете, как вы можете использовать эти фрагменты. У нас было много волшебников на наших экранах, поэтому мы использовали вышеупомянутую логику. Это не идеально, но модульно для статических мастеров, где вы делаете коммит только на последней странице.