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

Question

我主要想知道如何组织模态窗口和动态页面(如配置文件).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>

这种方式似乎不太一致.是否有人建立了一个可以提供一些建议的淘汰单页面应用程序？代码样本将不胜感激.

Answer 1

我们刚开始走上这条道路,所以不太确定我们在做什么.但这就是我们的想法.

页面应该由任意数量的"组件"组成,可能是嵌套的.每个组件都有一个视图模型和一个公共方法,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);
  };
}

请注意我们如何#book-details通过更改showDetails要执行的功能,使书籍详细信息显示在jQuery UI对话框中,而不是单个元素中

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

Answer 2

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

• 迪朗达尔
• Pagerjs
• 击退

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

Answer 3

现在在2014年,您可能希望使用Knockout的组件功能和Yeoman来支撑您的初始ko项目.观看此视频:Steve Sanderson - 使用Knockout.js构建大型单页应用程序