链接单个页面的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应用程序的部分

回答

相关问题