Aurelia路由：將視圖添加到選項卡式界面

我幾乎是全新的Aurelia，但在幾天的過程中，我選擇了初學者模板並在Pluralsight中通過了一些視頻培訓。我有一個獨特的視覺，我似乎無法決定是否撰寫元素,自定義元素或路由器最適合用於這種情況 - 或者如果我需要寫一些完全自定義的東西。Aurelia路由：將視圖添加到選項卡式界面

我寧願繼續使用路由器因爲它給你的 URL和歷史狀態。可能需要在Web應用程序內部深入鏈接。
當一個視圖/視圖模型被初始化時，我希望視圖附加到DOM，不會被替換爲。 <router-view>元素通過替換視圖來工作。
隨着每個視圖附加到DOM，我想創建一組選項卡，表示到目前爲止已打開的每個視圖。想想任何現代文本編輯器，IDE，甚至是Web瀏覽器都會顯示選項卡。
有時需要檢測一個視圖是否已經在DOM（viewmodel +參數）中呈現，並將該視圖添加到前面-vs-追加新視圖。

對於Aurelia，SPA和MVVM相對較新的人，您是否有任何建議，示例等？

謝謝。

來源

2016-06-08 Markus

這是一個很好的問題！我會做一些實驗，然後我會試着回答你的問題 –

我相信最簡單的方法是使用撰寫元素。您需要一個包含所有屏幕的數組，以及另一個數組來保存打開的屏幕。事情是這樣的：

screens = [ 
    { id: 1, name: 'Test 1', view: './test-1.html', viewModel: './test-1' }, 
    { id: 2, name: 'Test 2', view: './test-2.html', viewModel: './test-2' } 
    ]; 

    _activeScreens = []; 

    get activeScreens() { 
    return this.screens.filter((s) => this._activeScreens.indexOf(s.id) !== -1); 
    }

在你只需要使用<compose></compose>爲activeScreens每次迭代的HTML。

我做了這個例子https://gist.run/?id=c32f322b1f56e6f0a83679512247af7b向你展示了這個想法。在我的情況下，我用了一個html表格。在你的情況下，你可以使用一個標籤插件，比如Bootstrap或jQuery。

希望這會有所幫助！

來源

2016-06-09 00:14:04

Aurelia路由：將視圖添加到選項卡式界面

回答

相關問題