jdanyow / aurelia-converters-sample Goto Github PK

In Chrome, running into problem with Markdown in ES6-loader

"Potentially unhandled rejection [1] Error: Error instantiating Markdown."

Hi @jdanyow

I know how to use globally defined (as aurelia.use.feature(...) in main ) value convertor in html file, e.g:

<div>${name | toUppercase}</div>

But to call the globally defined value converter in javascript file?
Example:

export class Welcome {
  foo(text) {
    ?????.ToUppercaseValueConverter(text);
  }
}

1. In the Converter Parameters section, mention whether or not the parameterExpression must be within single quotes or not. [expression] | [converterName]:[parameterExpression] does not have single quotes around the expression but both immediate examples do. My guess is that single quotes are necessary for literal values but not for bound properties. Is that the case?
2. Also, clarify how to use (n) parameters. My guess is [expression] | [converterName]:[parameterExpression]:[parameterExpression]:[parameterExpression]:[parameterExpression]. Covered later in the article.

HTML1300: Navigation occurred.
File: about:blank
HTML1527: DOCTYPE expected. Consider adding a valid HTML5 doctype: "".
File: about:blank, Line: 1, Column: 1
HTML1300: Navigation occurred.
File: fp2RwDvm6q
HTML1500: Tag cannot be self-closing. Use an explicit closing tag.
File: binding-with-value-converters-in-aurelia, Line: 135, Column: 4
HTML1501: Unexpected end of file.
File: binding-with-value-converters-in-aurelia, Line: 184, Column: 1
HTML1521: Unexpected "< /body>" or end of file. All open elements should be closed before the end of the document.
File: binding-with-value-converters-in-aurelia, Line: 184, Column: 1
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
File: binding-with-value-converters-in-aurelia
HTML1300: Navigation occurred.
File: aurelia-converters-sample
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
File: binding-with-value-converters-in-aurelia
INFO [aurelia] Aurelia Starting
DEBUG [aurelia] Loading plugin github:aurelia/[email protected].
DEBUG [aurelia] Installed plugin github:aurelia/[email protected].
DEBUG [aurelia] Loading plugin github:aurelia/[email protected].
DEBUG [aurelia] Installed plugin github:aurelia/[email protected].
DEBUG [aurelia] Loading plugin github:aurelia/[email protected].
DEBUG [aurelia] Installed plugin github:aurelia/[email protected].
DEBUG [aurelia] Loading plugin github:aurelia/[email protected].
DEBUG [aurelia] Installed plugin github:aurelia/[email protected].
DEBUG [aurelia] Loading plugin github:aurelia/[email protected].
DEBUG [aurelia] Installed plugin github:aurelia/[email protected].
DEBUG [aurelia] Loading plugin ./resources/index.
DEBUG [aurelia] Installed plugin ./resources/index.
DEBUG [templating] importing resources for resources/example.html
"DEBUG [templating] importing resources for resources/example.html"
[
length: 0
]

DEBUG [templating] importing resources for resources/column.html
"DEBUG [templating] importing resources for resources/column.html"
[
length: 0
]

DEBUG [templating] importing resources for resources/file.html
"DEBUG [templating] importing resources for resources/file.html"
[
length: 0
]

INFO [aurelia] Aurelia Started
DEBUG [templating] importing resources for dist/app.html
"DEBUG [templating] importing resources for dist/app.html"
[
length: 0
]

SEC7118: XMLHttpRequest for https://api.github.com/orgs/aurelia/repos required Cross Origin Resource Sharing (CORS).
File: aurelia-converters-sample
DEBUG [templating] importing resources for examples/1/view.html
"DEBUG [templating] importing resources for examples/1/view.html"
[
length: 0
]

DEBUG [templating] importing resources for examples/2/view.html
"DEBUG [templating] importing resources for examples/2/view.html"
[
length: 0
]

Potentially unhandled rejection [1] TypeError: Unable to get property 'insertBefore' of undefined or null reference
at compileNode (Unknown script code:113:21)
at compileNode (Unknown script code:121:21)
at compile (Unknown script code:93:15)
at Anonymous function (Unknown script code:56:19)
at O (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:7449)
at K (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:7036)
at y.prototype.when (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:10248)
at v.prototype.run (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:9282)
at a.prototype._drain (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:1748)
at drain (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:1415)
DEBUG [templating] importing resources for examples/3/view.html examples/3/date-format,examples/3/currency-format
"DEBUG [templating] importing resources for examples/3/view.html"
[
0: "examples/3/date-format",
1: "examples/3/currency-format",
length: 2
]

DEBUG [templating] importing resources for examples/4/view.html examples/4/date-format,examples/4/number-format
"DEBUG [templating] importing resources for examples/4/view.html"
[
0: "examples/4/date-format",
1: "examples/4/number-format",
length: 2
]

DEBUG [templating] importing resources for examples/5/view.html examples/5/number-format
"DEBUG [templating] importing resources for examples/5/view.html"
[
0: "examples/5/number-format",
length: 1
]

DEBUG [templating] importing resources for examples/7/view.html examples/7/rgb-to-hex
"DEBUG [templating] importing resources for examples/7/view.html"
[
0: "examples/7/rgb-to-hex",
length: 1
]

Potentially unhandled rejection [2] TypeError: Unable to get property 'insertBefore' of undefined or null reference
at compileNode (Unknown script code:113:21)
at compileNode (Unknown script code:121:21)
at compile (Unknown script code:93:15)
at Anonymous function (Unknown script code:56:19)
at O (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:7449)
at K (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:7036)
at y.prototype.when (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:10248)
at v.prototype.run (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:9282)
at a.prototype._drain (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:1748)
at drain (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:1415)
Potentially unhandled rejection [3] TypeError: Unable to get property 'insertBefore' of undefined or null reference
at compileNode (Unknown script code:113:21)
at compileNode (Unknown script code:121:21)
at compile (Unknown script code:93:15)
at Anonymous function (Unknown script code:56:19)
at O (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:7449)
at K (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:7036)
at y.prototype.when (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:10248)
at v.prototype.run (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:9282)
at a.prototype._drain (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:1748)
at drain (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:1415)
Potentially unhandled rejection [4] TypeError: Unable to get property 'insertBefore' of undefined or null reference
at compileNode (Unknown script code:113:21)
at compileNode (Unknown script code:121:21)
at compile (Unknown script code:93:15)
at Anonymous function (Unknown script code:56:19)
at O (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:7449)
at K (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:7036)
at y.prototype.when (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:10248)
at v.prototype.run (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:9282)
at a.prototype._drain (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:1748)
at drain (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:1415)
Potentially unhandled rejection [5] TypeError: Unable to get property 'insertBefore' of undefined or null reference
at compileNode (Unknown script code:113:21)
at compileNode (Unknown script code:121:21)
at compile (Unknown script code:93:15)
at Anonymous function (Unknown script code:56:19)
at O (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:7449)
at K (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:7036)
at y.prototype.when (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:10248)
at v.prototype.run (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:9282)
at a.prototype._drain (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:1748)
at drain (http://jdanyow.github.io/aurelia-converters-sample/jspm_packages/es6-module-loader.js:7:1415)
DEBUG [templating] importing resources for examples/6/view.html examples/6/sort,examples/6/take
"DEBUG [templating] importing resources for examples/6/view.html"
[
0: "examples/6/sort",
1: "examples/6/take",
length: 2
]

Hi Thanks for a very nice demo, helped me a lot.

I wonder what's the best way to bundle value converters? And do I need to bundle them? I am afraid of polluting the global namespace.

Hi. First off, awesome docs!

I got everything working, except the final bit - to create the format classes as a plugin.

I've added the following to my main.js:

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('./resources/index'); // install our app's resources

  aurelia.start().then(a => a.setRoot());
}

I've cerate the resources folder, and added the class js files and the index.js to this folder.
I've also checked that aurelia-app="main" was added to index.html.

When the application starts, I get the following error:
GET http://127.0.0.1:9000/resources/index.js 404 (Not Found)

Using the classes outside of the plugin, i.e. as <require>, it works 100%

Great examples and framework feature. Could you update from the old 'import' to the new 'require' in for example:-

<template>
  <import from="./date-format"></import>
  <import from="./currency-format"></import>

  ${currentDate | dateFormat} <br/>
  ${netWorth | currencyFormat}
</template>

I think it is only working at present because you have registered them globally.

In section http://jdanyow.github.io/aurelia-converters-sample/#globally-accessible-value-converters, exported function is install, should be configure

export function install(aurelia) {
  aurelia.globalizeResources('./date-format', './number-format');
}

should be

export function configure(aurelia) {
  aurelia.globalizeResources('./date-format', './number-format');
}

As specified in docs - http://aurelia.io/docs.html#plugins

Hi! I would like to know if there is a way to concatenate multiple value converters as follows:

<compose
    if.bind="record | toBoolean && header | toBoolean"
    model.bind="header"
    view-model="./details/detail-header">
  </compose>

The framework gives an error due to the && operator... I've found a workaround creating a multiple-parameter converter, but it would be great to know if it is possible to concatenate multiple valueconverters together in a single statement... This way I won't need to create a specific converter for cases like this one.

Thanks!

Hi,
In your examples it seems that all sorts are done to numeric values, what if you if the column selected is a string value? i.e. in example 6 I would like the following added as a sort option.

  <option value="name">repo_name</option>

Thanks,
John

Hey @jdanyow ,
what a great set of samples! It would be nice if others could reuse your project to build their own samples. Would you be able to extract this as a reusable plugin?

This line is causing it to say July 7th 2017, when today is actually July 16th 2017. This is because of the Mo in the converter. I literally learned about Aurelia less than 15 minutes ago, so I'm just opening this issue, not a PR.