如何使用rally sdk 2.1在自定義拉力賽應用程序中維護對話組件的狀態？

Question

所以我正在玩拉力賽sdk來爲拉力賽建立自定義應用程序，而我正在嘗試做一些類似的事情。我正在使用拉力賽文本框和拉力賽對話框來實施它。它還沒有一個完美的功能，但我想要做的是保持我添加的對話框的狀態，以便在刷新應用程序時它們仍然存在。我還沒有弄明白這一點，而且我看不出它是通過閱讀關於維持國家的拉力指南來得到它的。

這裏是我到目前爲止的代碼：

Ext.define('CustomApp', { 
    extend: 'Rally.app.App', 
    stateful: true, 
    componentCls: 'app', 

    getState: function() { 
     return { 
      dialogs: this.dialogs 
     }; 
    }, 

    applyState: function(state) { 
     this.dialogs = state.dialogs; 
    }, 

    doLayout: function() { 
     var me = this; 
     var textField = Ext.create('Rally.ui.TextField', { 
      fieldLabel: 'Add task:', 
      listeners: { 
       scope: me, 
       specialkey: me._checkEnter 
      } 
     }); 

     me.add(textField); 
    }, 

    launch: function() { 
     this.doLayout(); 
     this.taskCounter = 0; 
     this.yPosition = 50; 
     this.dialogs = []; 
    }, 

    _checkEnter: function(field, event) { 
     if (event.getKey() == event.ENTER) { 
      this._onEnter(field); 
     } 
    }, 

    _onEnter: function(field) { 
     this.taskCounter = this.taskCounter + 1; 
     var dialog = Ext.create(Rally.ui.dialog.Dialog, { 
      context: this.getContext(), 
      id: (99990 + this.taskCounter).toString(), 
      autoShow: true, 
      autoCenter: false, 
      draggable: false, 
      closable: true, 
      modal: false, 
      width: 300, 
      x: 100, 
      y: this.yPosition, 
      title: 'Task ' + this.taskCounter, 
      items: { 
       xtype: 'component', 
       html: field.getRawValue(), 
       padding: 10 
      } 
     }) 

     this.yPosition = this.yPosition + 100; 
    } 
}); 

**** ****編輯

所以我一直在努力使這項工作。我一直試圖在頁面刷新和導航之間保持狀態，並開始通過使用數組來存儲不同的字符串來測試它，並且在返回到應用程序時查看它們是否仍然存在。每次我在字段框中輸入內容，然後按回車鍵，就會創建一個對話框，並調用saveState（），並嘗試保存一個字符串，其中包含創建的對話框的ID。但是，似乎getState函數僅保存第一次調用時的狀態（在第一次輸入時），因爲當我刷新或返回到應用程序時，唯一保留的字符串是第一個創建的對話框的ID ，但不是以下的。這是來自SDK的saveState函數的錯誤，還是我使用它錯了？謝謝。這是代碼：

Ext.define('CustomApp', { 
extend: 'Rally.app.App', 
stateful: true, 
componentCls: 'app', 

getState: function() { 
    console.log('getting state'); 

    if(this.dialogs.length > 0) { 
     console.log('this.dialogs from getState:', this.dialogs); 
     var newState = { 
      currentDialogs: this.dialogs 
     }; 
     console.log(newState); 
     return newState; 
    } 
    return null; 
}, 

applyState: function(state) { 
    console.log('applying state'); 
    console.log('current state:', state); 

    if(state.currentDialogs) { 
     this.dialogs = state.currentDialogs;  
     console.log('this.dialogs after applying state:', this.dialogs); 
    } 
    else { 
     this.dialogs = []; 
    } 
}, 

doLayout: function() { 
    var me = this; 
    var textField = Ext.create('Rally.ui.TextField', { 
     fieldLabel: 'Add task:', 
     listeners: { 
      scope: me, 
      specialkey: me._checkEnter 
     } 
    }); 

    me.add(textField); 
}, 

launch: function() { 
    this.dialogs = this.dialogs; 
    this.doLayout(); 
    this.taskCounter = 0; 
    this.yPosition = 50; 
}, 

_checkEnter: function(field, event) { 
    if (event.getKey() === event.ENTER) { 
     this._onEnter(field); 
    } 
}, 

_onEnter: function(field) { 
    this.taskCounter = this.taskCounter + 1; 
    var dialog = Ext.create(Rally.ui.dialog.Dialog, { 
     context: this.getContext(), 
     autoShow: true, 
     autoCenter: false, 
     draggable: false, 
     closable: true, 
     modal: false, 
     width: 300, 
     x: 100, 
     y: this.yPosition, 
     title: 'Task ' + this.taskCounter, 
     items: { 
      xtype: 'component', 
      html: field.getRawValue(), 
      padding: 10 
     } 
    }); 

    this.yPosition = this.yPosition + 100; 
    this.dialogs.push((99990 + this.taskCounter).toString()); 
    this.saveState(); 
} 
}); 

Answer 1

這是一個頭部劃痕器。事實證明，如果狀態層認爲該值沒有改變，則不進行持久化狀態的優化。因爲在您的getState方法中，您返回的是由應用程序使用和修改的相同對話框數組實例，因此它總是認爲該值是當前值，因此不會重新保留它。

所以只要你調整你的getState返回一個新的陣列中的每個你應該很好的時間去：

var newState = { 
    currentDialogs: [].concat(this.dialogs) 
}; 

一旦每次添加一個任務時，你會看到一個呼叫更新到位網絡選項卡中的首選項。

然後，您只需在啓動方法中添加代碼即可查看當前狀態並重新添加已添加的任務。

_.each(this.dialogs, function(dialog) { 
    this._addDialog(dialog.title, dialog.html); //todo: implement 
}, this);