3

我最近开始使用 Durandal 库来开发我正在开发的 SPA……感谢作者，它是一个出色的库。

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

详细地说，有一个widget.create函数允许在 JS 中创建一个小部件，但需要附加一个 DOM 元素。我更愿意做的是创建一个小部件，而不将它附加到 DOM，然后调用类似：

app.showModal(theWidget);

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

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

... 接着：

app.showModal('viewmodels/dialog');

其中 'viewmodels/dialog.js' 是“对话”视图的视图模型。

参考：

4

1 回答 1

2

小部件是网页上可重用的控件，这就是它们需要 DOM 元素的原因。我不确定我是否完全理解您要执行的操作，但是您可以定义一个返回其构造函数而不是单例对象的视图。

这是一个返回单例的视图：

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

  return singleton;
});

这是相同的视图，但返回其构造函数：

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

  return notSingleton;
});

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

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

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

希望这可以帮助。

于 2013-08-22T23:46:49.547 回答