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

发布于 2025-01-04 19:38:03 字数 510 浏览 0 评论 0原文

我主要想知道如何组织模式窗口等内容以及配置文件等动态页面。 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>

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

原文

I am mostly wondering how to organize things like modal windows, and dynamic pages like profiles. Should the viewModel only contain one profile view or contain all profiles loaded? This here just doesnt seem very "clean".

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>

This way doesn't seem very consistent. Is there anybody who has built a single page app with knockout that can offer some advice? Code samples would be appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

瑶笙 2025-01-11 19:38:03

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

该页面应该由任意数量的“组件”组成，可能是嵌套的。每个组件都有一个视图模型和一个公共方法 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 函数来使书籍详细信息显示在 jQuery UI 对话框中，而不是单个 #book-details 元素中

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

We are just starting down this path at work, and so are not quite sure what we're doing. But here's the idea we have.

The page should be composed of any number of "components," possibly nested. Each component has a view model and one public method, renderTo(el), which essentially does

ko.applyBindings(viewModelForThisComponent, el)

It also could have the ability to render subcomponents.

Constructing or updating a component consists of giving it a model (e.g. JSON data from the server), from which it will derive the appropriate view model.

The app is then created by nesting a bunch of components, starting with a top-level application component.

Here is an example for a "hypothetical" book-managing application. The components are LibraryUI (displays a list of all book titles) and DetailsUI (a section of the app that displays details on a book).

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

Note how we could make the book details appear in a jQuery UI dialog, instead of in a singleton #book-details element, by changing the showDetails function to do

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

回复收藏 0 原文

难以启齿的温柔 2025-01-11 19:38:03

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

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

回复收藏 0 原文

渡你暖光 2025-01-11 19:38:03

现在到了 2014 年，您可能希望使用 Knockout 的组件功能和 Yeoman 来搭建您最初的 ko 项目。请观看此视频：Steve Sanderson - 使用 Knockout.js 构建大型单页应用程序

回复收藏 0 原文

ゝ偶尔ゞ 2025-01-11 19:38:03

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

原始答案如下：

我想向您介绍 Phillipe Monnets 关于 Knockout.js 的系列文章 4。他是我遇到的第一个将示例项目拆分为多个文件的博主。我真的很喜欢他的大部分想法。我唯一错过的是如何使用某种存储库/网关模式来处理 ajax/rest 检索的集合。这是一本好书。

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

祝你好运！

回复收藏 0 原文

雪花飘飘的天空 2025-01-11 19:38:03

我刚刚开源了我组装的迷你 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 缩小和 gizpped）
两个用于生产的 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
- jQuery http://jquery.com
- 糖http://sugarjs.com