Отображение виджета с помощью модального диалога Durandal

Недавно я начал использовать библиотеку Durandal для SPA, который я разрабатываю... респект автору, это отличная библиотека.

Мне нравится концепция виджетов по сравнению с использованием представлений для экранов без состояния, но я не смог отобразить виджет в модальном диалоговом окне, не прикрепляя его к представлению. Кто-нибудь знает как это сделать?

Чтобы уточнить, существует функция widget.create, которая позволяет создавать виджет в JS, но требует присоединения к нему элемента DOM. Я бы предпочел создать виджет, не прикрепляя его к DOM, а затем вызвать что-то вроде:

app.showModal(theWidget);

В качестве альтернативы я знаю, что могу создать "диалоговое" представление, которое сопоставляется с заменяемыми виджетами, а затем использовать это представление для диалогов, например. вид будет иметь:

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

... а потом:

app.showModal('viewmodels/dialog');

где viewmodels/dialog.js — это модель представления для представления Dialog.

Использованная литература:


single-page-application durandal
person user975060    schedule 28.03.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Виджеты предназначены для многократного использования элементов управления на веб-странице, поэтому для них требуется элемент 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 модели представления.

Надеюсь это поможет.

person Brett    schedule 22.08.2013