如何使用knockout.js构建单页应用程序

How to structure a single page app with knockout.js?

本文关键字：单页 应用程序 构建 js 何使用 knockout      更新时间：2023-09-26

我主要想知道如何组织模式窗口和配置文件等动态页面。viewModel应该只包含一个配置文件视图还是包含加载的所有配置文件？这里看起来不太"干净"。

viewModel = {
  profile: ko.observableArray([
    new ProfileViewModel()
    //... any others loaded
  ])
, createPostModal: {
    input: ko.observable()
  , submit: //do something to submit...
  }
}
<div data-bind="foreach: profile"><!-- profile html --></div>
<div data-bind="with: createPostModal"></div>

这种方式似乎不太一致。有没有人构建了一个带有淘汰功能的单页应用程序，可以提供一些建议？代码示例将不胜感激。

我们刚刚开始沿着这条路工作，所以不太确定我们在做什么。但这是我们的想法。

页面应该由任意数量的"组件"组成，可能是嵌套的。每个组件都有一个视图模型和一个公共方法renderTo(el)，该方法本质上执行

ko.applyBindings(viewModelForThisComponent, el)

它还可以渲染子组件。

构建或更新组件包括给它一个模型（例如，来自服务器的JSON数据），它将从中派生适当的视图模型。

然后通过嵌套一组组件来创建应用程序，从顶级应用程序组件开始。

下面是一个"假想的"图书管理应用程序的示例。组件是LibraryUI（显示所有书名的列表）和DetailsUI（应用程序中显示书籍详细信息的部分）。

function libraryBookViewModel(book) {
  return {
    title: ko.observable(book.title),
    showDetails: function () {
      var detailsUI = new BookDetailsUI(book);
      detailsUI.renderTo(document.getElementById("book-details"));
    }
  };
}
function detailsBookViewModel(book) {
  return {
    title: ko.observable(book.title),
    author: ko.observable(book.author),
    publisher: ko.observable(book.publisher)
  };
}
function LibraryUI(books) {
  var bookViewModels = books.map(libraryBookViewModel);
  var viewModel = {
    books: ko.observableArray(bookViewModels);
  };
  this.renderTo = function (el) {
    ko.applyBindings(viewModel, el);
  };
}
function BookDetailsUI(book) {
  var viewModel = detailsBookViewModel(book);
  this.renderTo = function (el) {
    ko.applyBindings(viewModel, el);
  };
}

请注意，我们如何通过更改showDetails函数来执行，使书籍详细信息显示在jQueryUI对话框中，而不是单个的#book-details元素中

var dialogEl = document.createElement("div");
detailsUI.renderTo(dialogEl);
$(dialogEl).dialog();

有三个框架可以帮助使用Knockoutjs创建SPA。

  • 杜兰达尔
  • Pagerjs
  • KnockBack

我用过Durandal，我真的很喜欢它。它很容易使用，有很多不错的配置，所以你可以插入你自己的实现。此外，Durandal是由Caliburn的同一创建者创建的，Caliburn是一个非常流行的用于构建Silverlight/WPF应用程序的框架。

2014年，您可能希望使用Knockout的组件特性和Yeoman来构建您最初的ko项目。请参阅此视频：Steve Sanderson-使用Knockout.js 构建大型单页应用程序

[更新时间2013年4月5日]在撰写本文时，此答案有效。目前，我还建议采用Durandal JS方法。如果您使用的是ASP.NET MVC，请查看John Papa的Hot Towel或Hot Towelette SPA模板。这也使用了杜兰达尔。

原始答案如下：

我想向你介绍一下关于Knockout.js的Phillipe Monnets 4集系列。他是我遇到的第一个将示例项目拆分为多个文件的博客作者。我真的很喜欢他的大部分想法。我唯一错过的是如何通过使用某种Repository/Gateway模式来处理ajax/rest检索到的集合。这是一本很好的读物。

链接到第1部分：http://blog.monnet-usa.com/?p=354

祝你好运！

我刚刚开源了我组装的迷你SPA框架，Knockout是主要组件。

淘汰赛水疗建立在Knockout、Require、Director、Sugar之上的迷你（但全面）SPA框架。https://github.com/onlyurei/knockout-spa

现场演示：http://knockout-spa.mybluemix.net

功能

  • 路由（基于Flatiron的Director）：HTML5历史（pushState）或散列
  • 高度可组合和可重用：在页面特定的JS中为页面选择模块/组件，它们将自动连接到页面的HTML模板
  • SEO就绪（prerender.io）
  • 快速且轻量级（85 KB的JS缩小和缩小）
  • 用于生产的JS的两层捆绑包构建：大多数页面将使用的通用模块，以及将延迟加载的页面特定模块
  • 有组织的文件夹结构可以帮助您保持理智，以便组织和重用JS、CSS、HTML
  • 使用Knockout 3.3.0+，为Knockout的web组件和自定义标签风格做好准备(http://knockoutjs.com/documentation/component-overview.html)
  • 所有文档都在主要依赖项自己的主页中，因此您不需要完全学习新的框架
    • 淘汰赛http://knockoutjs.com
    • 要求http://requirejs.org
    • 主任https://github.com/flatiron/director
    • jQueryhttp://jquery.com
    • 糖http://sugarjs.com
相关文章：