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

Question

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

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>

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

Answer 1

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

页面应该由任意数量的“组件”组成，可能是嵌套的。每个组件都有一个 View 模型和一个公共(public)方法，renderTo(el)，它本质上是做

ko.applyBindings(viewModelForThisComponent, el)

它也可以渲染子组件。

构建或更新组件包括为其提供模型(例如来自服务器的 JSON 数据)，组件将从中派生出适当的 View 模型。

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

---

这是一个 "hypothetical" 的例子书籍管理应用程序。这些组件是 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();