From 0d35c2d3c5d54514715ab01014817e3e10990d2b Mon Sep 17 00:00:00 2001 From: StrahilKazlachev Date: Mon, 4 Sep 2017 21:29:14 +0300 Subject: [PATCH] doc(dialog-basics): add webpack notes --- doc/article/en-US/dialog-basics.md | 36 +++++++++++++++++++++++++----- doc/example/prompt.html | 2 +- 2 files changed, 32 insertions(+), 6 deletions(-) diff --git a/doc/article/en-US/dialog-basics.md b/doc/article/en-US/dialog-basics.md index 853c806..038dff3 100644 --- a/doc/article/en-US/dialog-basics.md +++ b/doc/article/en-US/dialog-basics.md @@ -75,18 +75,21 @@ typings install github:aurelia/dialog --save + import {PLATFORM} from 'aurelia-pal'; export function configure(aurelia) { aurelia.use .standardConfiguration() .developmentLogging() - .plugin('aurelia-dialog'); + .plugin(PLATFORM.moduleName('aurelia-dialog')); aurelia.start().then(a => a.setRoot()); } -> Note: If you are using WebPack it is possible that the plugin is installed before Aurelia has replaced the `` element, if that is where your `aurelia-app="main"` is defined, which results in some of the dialog components getting overwritten. In this case you can move the `aurelia-app` attribute to a `
` inside of the ``. Example - `
`. +> Warning: When the `` is marked with the `aurelia-app` attribute any dialog open prior to the app being attached to the DOM(before `Aurelia.prototype.setRoot` completes), will be *removed* from the DOM. Opening a dialog in the `canActivate` or `activate` hooks is *OK* in any scenario *if* you *await* it to close *before continuing*. If you just want to open a dialog, without awaiting it to close, do it the `attached` hook instead. + +> Warning: `PLATFORM.moduleName` should *not* be omitted if you are using Webpack. ## [Using The Plugin](aurelia-doc://section/3/version/1.0.0) @@ -152,7 +155,6 @@ There is also an `output` property that gets returned with the outcome of the us import {DialogController} from 'aurelia-dialog'; - export class EditPerson { static inject = [DialogController]; person = { firstName: '' }; @@ -220,11 +222,13 @@ You can specify global settings as well for all dialogs to use when installing t + import {PLATFORM} from 'aurelia-pal'; + export function configure(aurelia) { aurelia.use .standardConfiguration() .developmentLogging() - .plugin('aurelia-dialog', config => { + .plugin(PLATFORM.moduleName('aurelia-dialog'), config => { config.useDefaults(); config.settings.lock = true; config.settings.centerHorizontalOnly = false; @@ -237,10 +241,32 @@ You can specify global settings as well for all dialogs to use when installing t -### Controller Settings +### Dialog Settings The settings available for the dialog are set on the dialog controller on a per-dialog basis. - `viewModel` can be url, class reference or instance. + - url - path relative to the application root. + ``` + . + +-- app.js + +-- forms + +-- consent-form.js + +-- consent-form.html + +-- prompts + +-- prompt.js + +-- prompt.html + ``` + If you want to open a `prompt` from `consent-form` the path will be `prompts/prompt`. + + > Warning: Webpack users should *always* mark dynamically loaded dependencies with `PLATFORM.moduleName`. For more details do check the `aurelia-webpack-plugin` [wiki](https://github.com/aurelia/webpack-plugin/wiki). + + - object - it will be used as the view model. In this case `view` must also be specified. + - class - the view model *class* or *constructor function*. + > Note: This approach depends on being able resolve the origin of the class. + + > Note: Webpack users are advised to use the string overload, wrapped with `PLATFORM.moduleName`, instead of this one. + + > Warning: This approach might not work for Webpack users when using *DLLPlugin* or *ModuleConcatenationPlugin*. - `view` can be url or view strategy to override the default view location convention. - `model` the data to be passed to the `canActivate` and `activate` methods of the view model if implemented. - `host` allows providing the element which will parent the dialog - if not provided the body will be used. diff --git a/doc/example/prompt.html b/doc/example/prompt.html index c451824..9f9db79 100644 --- a/doc/example/prompt.html +++ b/doc/example/prompt.html @@ -1,6 +1,6 @@