鏈接單個頁面的Web應用程序的部分

我正在爲移動用戶（最終將移植到Phonegap）定位的單頁網站上工作。我已將我的屏幕細分爲「卡片」，基本上我只是根據需要顯示/初始化/隱藏了<div>。鏈接單個頁面的Web應用程序的部分

目前我無法確定正確的結構，以便將這些面板連接成一個連貫的應用程序。我目前的執行是這樣的（目前使用的淘汰賽，因爲我熟悉它）：

//Javascript 
var LoginCard = function() { 
    this.goToRegister = function() { 
     // IF registerCard is not initialized 
     // THEN ko.applyBindings(new RegisterCard(), document.getElementById('registerCard')); 
     // ELSE $('#registerCard').show(); 
    }; 
    this.doLogin = function() { /* Goes to home card after login */ }; 
} 
var RegisterCard = function() { 
    this.goToLogin = function() { /* Goes back to login card */ }; 
    this.doRegister = function() { /* Goes to login card after reg */ }; 
} 
ko.applyBindings(new LoginCard(), document.getElementById('loginCard')); 

//HTML 
<div id="loginCard"> 
    <button data-bind="click: goToRegister" id="btnReg">Register Account</button> 
    <button data-bind="click: doLogin" id="btnLogin">Login</button> 
</div> 
<div id="registerCard"> 
    <button data-bind="click: goToLogin" id="btnBackToLogin">Back To Login</button> 
    <button data-bind="click: doRegister" id="btnDoReg">Submit Registration</button> 
</div>

正如你可以看到，連接視圖模型本身內發生，所以不同的視圖模型（例如loginCard，registerCard ，homeCard）變得緊密相連。

更加「低級」的替代方案也只是使用jQuery綁定按鈕事件，使每個卡沒有了解對方的卡細節：

//But this means I have to specify a ton of unique IDs for all the elements in the page. 
$('#btnReg').click(function() { /* Initialize and go to registerCard. */ });

我也想過用的散列路由/ pushState所以雖然點擊事件仍然在每個視圖模型中，但它只需要知道哪些URL即可到達？例如：

var LoginCard = function() { 
    this.goToRegister = function() { 
     window.location.hash = 'register'; 
     //or history.pushState('state', '', 'register'; 
    }; 
}

這是我第一次嘗試創建單頁應用程序，所以我對設計選擇非常困惑。哪一個會更好，或者任何人都可以提出關於此的標準方法？

來源

2012-11-28 Jensen Ching

我建議你爲路由創建另一個對象，路由依賴於路由庫，如SammyJS或CrossroadsJS。

請參考我的愛好項目，MyStory.Spa，它也是單頁面應用風格的網頁（不適用於手機應用），它使用SammyJS進行瀏覽器級別的路由。在MyStory.Spa體系結構中，webapp/app/infra/router.js擔任路由的角色，有關路由，視圖和視圖模型的詳細信息位於/webapp/app/infra/routing.table.js中。

通過這種方式，您可以分離View，ViewModel，Model，Data Service，Routing等。

來源

2012-11-28 08:45:05 Ray

謝謝，我從看你的項目結構中得到一些想法。在製作應用程序時，您是否仍會鏈接到用作參考的任何資源/網站？ –

複合視圖中的SPA課程（http://www.pluralsight.com/training/Courses/TableOfContents/spa）是一個很好的參考，儘管一些功能取決於asp.net mvc框架。而BoilerplateJS（https://github.com/ectechno/boilerplatejs）也可能是一個很好的詮釋。它爲SPA提供了一些幫助功能，並展示了SPA風格應用的最佳實踐 – Ray

鏈接單個頁面的Web應用程序的部分

回答

相關問題