Question

我正在开发针对移动用户的单页网站（最终将移植到Phonegap）。我已将屏幕分解为“卡片”，基本上只是<div> s，我根据需要显示/初始化/隐藏。

目前，我无法确定要使用的正确结构，以便将这些面板链接到一个连贯的应用程序中。我当前的实现是这样的（目前使用Knockout，因为我熟悉它）：

//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. */ });

我还想过使用hash-routing / pushState，所以当click事件仍在每个视图模型中时，它必须知道的是要去的URL？类似的东西：

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

这是我第一次尝试创建单页应用程序，所以我对设计选择感到困惑。哪一个会更好，或者任何人都可以提出标准的方法来解决这个问题？

Answer 1

我建议您为路由创建另一个对象，该对象依赖于路由库，例如SammyJS或CrossroadsJS。

请参考我的爱好项目MyStory.Spa，它也是单页应用程序样式的web（不适用于移动应用程序），它使用SammyJS进行浏览器级别路由。在MyStory.Spa体系结构中，webapp / app / infra / router.js负责路由，有关路由，视图，视图模型的详细信息位于/webapp/app/infra/routing.table.js.

通过这种方式，您可以分离View，ViewModel，Model，Data Service，Routing等。

链接单页Web应用程序的各个部分

1 个答案: