single-page-application - 使用 Durandal 模态对话框显示小部件

Question

我最近开始在我正在开发的 SPA 中使用 Durandal 库...感谢作者，它是一个优秀的库。

我喜欢小部件的概念，而不是将 View 用于无状态屏幕，但我无法在模态对话框中显示小部件，除非将其附加到 View 。有谁知道如何做到这一点？

详细来说，有一个 widget.create 函数允许在 JS 中创建小部件，但需要附加一个 DOM 元素。我更愿意做的是创建一个小部件，而不将其附加到 DOM，然后调用如下内容:

app.showModal(theWidget);

作为替代方案，我知道我可以创建一个映射到可交换小部件的“对话框” View ，然后将该 View 用于对话框，例如该 View 将具有:

<div data-bind="widget: {kind:widgetId}">/div>

...然后:

app.showModal('viewmodels/dialog');

其中“viewmodels/dialog.js”是“对话框” View 的 View 模型。

引用资料:

• 模态:http://durandaljs.com/documentation/Showing-Message-Boxes-And-Modals/
• 小部件:http://durandaljs.com/documentation/Creating-A-Widget/

Answer 1

小部件旨在成为网页上可重用的控件，因此这就是它们需要 DOM 元素的原因。我不确定我是否完全理解你想要做什么，但你可以定义一个返回其构造函数而不是单例对象的 View 。

这是一个返回单例的 View :

define([], function() {
  var singleton = {
    title: "I'm Mr. Singleton"
  };

  return singleton;
});

这是相同的 View ，但返回其构造函数:

define([], function() {
  var notSingleton = function () {
    this.title = "I'm NOT Mr. Singleton"
  };

  return notSingleton;
});

然后您可以在另一个 View 模型或模块中使用其中任何一个，如下所示:

define(['viewmodels/singleton', 'viewmodels/notSingleton'], 
function(singleton, NotSingleton) {
  ...
  app.showModal(singelton);
  app.showModal(new NotSingleton());
  ...
});

在后一种情况下，您可以跨多个其他 View 创建同一 View 模型的多个对话框，但每个对话框都是其自己的实例，具有自己的属性。如果您想在该 View 模型类型的所有实例之间共享数据和/或行为，您可以将它们添加到 View 模型的原型(prototype)。

希望这对您有所帮助。