在基於dojo的應用程序的javascript中轉換視圖

我有兩個場景需要幫助，並且我認爲將它們放在一起會證明更多對於我和其他觀衆來說很有價值。在基於dojo的應用程序的javascript中轉換視圖

設置：

Worklight 6.1 
    dojo 1.9 

Application: 
    MainView.html (Contains Body, and a transition Div, and NorthSouthView.js script reference) 
    View1.html (Contains a single Div that displays and unordered list 
    View2.html (Contains a single Div that Displays <p> data, and also plays audio) 
    View3.html (Contains a single Div that Displays instructional information) 

    application-descriptor <mainFile> MainView.html </mainFile> 

    All of the views are stored together in the application. There are no external http queries made by the application. All view transitions are local to the application.

方案1：

At application start the MainView.html is invoked by worklight. Anticipated format:: 

    <body> 
     <div> 
     <h1 id="SSheader" data-dojo-type="dojox.mobile.Heading" data-dojo-props='fixed:"top"'>Loan Snapshot</h1> 
     </div> 

     <div id="TransitionViewDiv"> 

      /* Would like to load content of View1.html, View2.html, or View3.html here */ 

     </div> 
    <script>SetView.js</script> 
</body> 

Description + Questions: 

When the application starts, SetView.js will be loaded, and the purpose of this script is to look at localStorage and determine which view should be displayed. (View1, View2, or View3). The goal is to keep SSheader fixed at the top of the screen at all times. Only TransitionViewDiv would update.

問題：

欣賞任何意見來完成上述方法，或歡迎的最佳實踐任何建議完成轉型。

場景＃2：

作爲上述場景1的後續。一旦View1，2或3成功加載，視圖將定義按鈕，這些按鈕將導致過渡到另一個剩餘視圖。因此，如果SetView.js中的內容是在View2中滑動顯示的，View2 將具有想要加載的按鈕，例如View3.html。

說明+問題：

1）請問最好的方法，從View2.html加載View3.html被使用moveTo點擊按鈕，或應按鈕使用回調來調用JavaScript引起類似於用來加載初始視圖的過渡？

欣賞關於管理存儲在獨立文件中的多個視圖的最佳實踐的任何建議。最終，應用程序將擁有15個以上的ViewXX.html文件，每個文件都包含一個Div。基於此，在一個HTML文件中擁有所有視圖並強制隱藏，並且顯示不可行。

感謝您的時間，並幫助

來源

2014-02-24 Michael Mirt

要加載HTML片段（View1.html，View2.html或View3.html），你可以使用dojox/mobile/ContentPane。此小部件允許您提供可用於指定視圖位置的href屬性。

你也可以改變它後來被重新設置href屬性，例如：

registry.byId("myContentPane").set("href", "View2.html");

你應該保持div#TransitionViewDiv和編程添加dojox/mobile/ContentPane它，或者使用聲明的語法，並添加以下屬性：

<div id="TransitionViewDiv" data-dojo-type="dojox/mobile/ContentPane" data-dojo-props="href: 'View1.html'"></div>

你的第二個場景是不同於第一個。在第一個，你實際上有1視圖與很多碎片，而在你的第二種情況下，你有許多意見。

如果您只有1個視圖，則無法轉換到其他視圖（沒有視圖）。所以如果你想使用轉換，你不能使用dojox/mobile/ContentPane。

但是，如果您有單獨的視圖，那麼這意味着您需要將標題移動到每個視圖（因爲它們是其中的一部分）。對於這些，更復雜的情況下，我認爲你應該看看dojox/app模塊。這涵蓋了很多MVC代碼，你需要做的只是配置它。

如果您對dojox/app模塊不感興趣，可以嘗試繼承視圖。你可能想看看我曾經提供的this answer。在該答案的評論部分，您還可以找到更詳細的JSFiddle。在這個例子中，頭部實際上是被繼承的。我還寫了一篇更詳細的文章來處理this case。

來源

2014-02-24 14:18:25 g00glen00b

請忽略先前的評論。它格式不正確。已更新的Commet：Scenaio＃1已完成，導致固定的heaer Div，隨後是「ContentPane」，並且ContentPane包含如您所描述的以編程方式加載的View2.html。 View2.html是一個帶有2個選項卡按鈕的Div。我可以使用tabbar按鈕來調用一個js文件，以再次更新「TransitionViewDiv」ContentPane href = View3.html並將View3.html加載到ContentPane中，替代View2.html？這種方法是否可行，並接受了良好的做法？非常感謝您的幫助和建議。 –

這是可能的。 ContentPane也呈現您的小部件，只需在您的獨立視圖中定義您的事件聲明。但事件處理程序本身（JavaScript代碼）必須在'MainView.html'中加載（視圖中的JavaScript被'ContentPane'忽略）。 – g00glen00b

謝謝。我很欣賞這個建議。現在就着手實施。 –

在基於dojo的應用程序的javascript中轉換視圖

回答

相關問題