Pagerjs 和淘汰赛，SPA 文件结构答案

【问题标题】：Pagerjs and knockout, SPA file structurePagerjs 和淘汰赛，SPA 文件结构
【发布时间】：2014-08-23 21:01:57
【问题描述】：

我很难理解如何使用 pagerjs 和 knockout 来正确构建我的应用程序。我希望在每个页面参考中包含单独的视图模型。

这是我的 index.html 示例中的 3 个页面：

         <div data-bind="page: {
                            id: 'page_1', 
                            title: 'page 1', 
                            source: 'views/page1.html',
                            with: page1ViewModel
                            }">
            </div>

            <div data-bind="page: {
                            id: 'page_2', 
                            title:'Page 2', 
                            source: 'views/page2.html',
                            with: page2ViewModel
                            }">
            </div>

            <div data-bind="page: {
                            id: 'page_3', 
                            title:'Page 3', 
                            source: 'views/page3.html',
                            with: page3ViewModel
                            }">
            </div>

所以我将我的页面 html 拆分到一个视图文件夹中，这很好用。我真正难以理解的是如何将我的所有视图模型存储在单独的文件中，以及它如何与 pagerjs 一起使用。

如果我只是在“main.js”中使用一个视图模型，它看起来像这样：

function viewModel() {

}

var viewModel = new viewModel();
// use #!/ instead of the default #
pager.Href.hash = '#!/';

// extend viewModel with a $__page__ that points to pager.page that points to a new Page
pager.extendWithPage(viewModel);
// apply your bindings
ko.applyBindings(viewModel);
// run this method - listening to hashchange
pager.start();

我们将不胜感激任何有助于通过视图模型的逻辑分离来构建它。

【问题讨论】：

可以看到完整的结构here
我没有看到单独文件中的视图模型有任何分离？
这也依赖于requirejs吗？

标签： knockout.js pagerjs

【解决方案1】：

此处的完整示例站点： https://github.com/maxfridbe/WindowKO-TS-JS/tree/master/CleanWeb

基本上敲除寻呼机和打字稿

我用我自己的 makepage 绑定包装页面：makepage()，它采用基于声明式约定的结构：即 makepage('bob') 具有这种结构

将放置一个 !#/bob

/area folder

    /views folder

   /view models folder

【讨论】：