Question

我很难理解如何使用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'中使用一个viewmodel，它将如下所示：

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();

非常感谢任何使用视图模型的逻辑分离来构建它的帮助。

Answer 1

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

基本上是Knockout Pager和Typescript

我用自己的makepage绑定包装页面：makepage（），它采用基于声明式约定的结构：即makepage（＆＃39; bob＆＃39;）具有这种结构

将放置一个！＃/ bob

/area folder

    /views folder

   /view models folder

Pagerjs和knockout，SPA文件结构

1 个答案: