aurelia / templating Goto Github PK

View Code? Open in Web Editor NEW

115.0 23.0 104.0 24.27 MB

An extensible HTML templating engine supporting databinding, custom elements, attached behaviors and more.

License: MIT License

JavaScript 1.00% TypeScript 99.00%

templating's People

Stargazers

Watchers

Forkers

ahmedshuhel meenie bryanrsmith alxandr michaelsg ashleygrant technicalmedia nenuko mbroadst manuel-guilbault elenduuche plwalters jw56578 rmacteague phamthaithinh milunka isaacweathers simudream alvarezmario cmichaelgraham charlespockert hitesh97 spencewood shanonvl michaelgeorgeattard tjkr devmondo ixonal joelcoxokc jovanracic053 sylvain-hamel egeland aftabansari10662 gautamsi damianof atsu85 niieani skull-sage brandonseydel scottmmjackson apawsey simonfox jeroenvinke plusamp atul221282 doktordirk danielporumb kristianmandrup michie1 ayurmedia alexsxx lgabeskiria kannajune don-bluelinegrid gamtiq erikschierboom sch3lp palof astoker rajajhansi bigopon zedl mroseboom jods4 tomasbonco strahilkazlachev achuou1 mttmccb didzis dimlucas dackjaniels2001 zewa666 akshaykhot rytmis wongruoyu romkevdmeulen tjad austinbrunkhorst pndewit aluanhaddad michaelsmithson gallayl rballonline an0o0nym jwx loai-kanou sunrun93 pwoosam fkleuver guidocecilio wallaceturner hariseldon78 capitechas dannybies witrin tonylugg tomschluter baerrach 1pmazurek chris-dickson

templating's Issues

[Feature] Databind to custom data-* attributes

Assuming an object obj is equal to { name: "one", value: "1" }

I would like to databind obj properties to a custom data-* attribute in my template so that:

<div data-value.bind="obj.value">${obj.name}</div>

... renders as

<div data-value="1">one</div>

Add capability for setting the default binding direction for an Attached Behavior

The docs mention "First, note that we must specify the .two-way binding command on selected-item since this isn't a standard form value."
Aurelia should give attached behaviors like selected-item can't a way to set a default binding direction to override the ONE_WAY.

Proposed solutions:

new Property('value', 'valueChanged', TWO_WAY, 'selected-item')

or maybe

new Property('value', 'valueChanged', TWO_WAY, { binding: 'selected-item' } )

@EisenbergEffect's proposal:

new Property('value', 'valueChanged', 'selected-item’).twoWay()

Exception if `script` tags are outside of `amelia-app` element

If the script tags are outside of amelia-app element - there is an exception:

Uncaught TypeError: Cannot read property 'nextElementSibling' of null

HTML which produces the exception:

<!DOCTYPE html>
<html>
<head>
  <title>Aurelia</title>
</head>
<body>
  <div aurelia-app></div>
  <script src="jspm_packages/system.js"></script>
  <script src="config.js"></script>
  <script type="text/javascript">System.import('aurelia-bootstrapper');</script>
</body>
</html>

and those are htmls which do not cause the exception:

<!DOCTYPE html>
<html>
<head>
  <title>Aurelia</title>
</head>
<body>
  <div aurelia-app>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script type="text/javascript">System.import('aurelia-bootstrapper');</script>
  </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Aurelia</title>
</head>
<body aurelia-app>
  <script src="jspm_packages/system.js"></script>
  <script src="config.js"></script>
  <script type="text/javascript">System.import('aurelia-bootstrapper');</script>
</body>
</html>

circular dependency problem with requirejs

thanks to @colindembovsky, dragon slayer 😄, for finding the issue causing the problem (the requirejs loader fails to load 0.10.0 and later aurelia apps)

we need help identifying a plan to resolve the issue.

in requirejs, circular dependency injects are undefined, which is the symptom here.

If you define a circular dependency ("a" needs "b" and "b" needs "a"), then in this case when "b"'s module function is called, it will get an undefined value for "a". "b" can fetch "a" later after modules have been defined by using the require() method (be sure to specify require as a dependency so the right context is used to look up "a")

view-engine requires module-analyzer
module-analyzer requires custom-element
custom-element requires view-engine

so you see it's circular 😄

General changedHandler for AttachedBehaviors

When you create an AttachedBehavior with multiple properties, this leads to having a lot of different changedHandlers. So it'd be nice if we could come up with a general handler, which gets called no matter what property changes.

Also we should think about the possibility to batch property changes and trigger the callback only once. As an example let's say you wrap Bootstraps Popover and in the handler you'd like to re-initialize the component. So instead doing it for each property change, having them stashed and only executing the function ones would be nice.

Regarding naming I'd propose one of the following:

onChanged
onPropertyChanged
propertiesChanged
anyChanged

the serialization should contain the propertyName as well as the newValue for the prop.

Add pre-compile hook to custom elements

Custom elements(or behaviors in general?) should have a preCompile hook that gives them access to the raw template element before it is compiled.
E.g.

import style form './super-button.css!text';

export class SuperButtonCustomElement {
    ...
    beforeCompile(template) {
        var styleSheet = document.createElement('style');
        styleSheet.appendChild(document.createTextNode(style));
        template.content.appendChild(styleSheet);
        // return template;  // necessary?
    }
}

Proposal: Include annotation that causes customElements to inherit from SVGElement

Problem: Unable to create customElements that play well inside an SVG canvas.

Example: I created two components, <x-canvas> and <x-node>, each with their own template. The <x-canvas> has an <svg> </svg> pair, and instantiates multiple <x-node>s inside, using an Aurelia repeat.for= on a <g> tag.

Unfortunately, it would appear that SVG does not recognise custom elements that don't inherit from SVGElement. Thus the <x-node> tags and their contents are not displayed.

Suggestion: a new annotation @svgElement that, when used alongside @customElement, causes the new element to be registered with extends: "SVGElement" in the options parameter to document.registerElement().

BTW: I used a <g> tag, since an inner template tag for the repeat.for raised a RangeError: Maximum call stack size exceeded during view compilation. This may be a bug, stack trace follows:

    at ViewCompiler.compile (http://localhost:8080/jspm/github/aurelia/[email protected]/view-compiler.js:90:18)

    at ViewCompiler.compileElement (http://localhost:8080/jspm/github/aurelia/[email protected]/view-compiler.js:159:34)

    at ViewCompiler.compileNode (http://localhost:8080/jspm/github/aurelia/[email protected]/view-compiler.js:102:29)

    at ViewCompiler.compile(...)   etc

ViewSlot firstChild null not being checked

i'm getting an exception when i run a todo sample. it looks like ViewSlot is not checking if .firstChild is null before referencing its properties.

typescript repo containing sample
todo project within repo
running code illustrating exception
no check for firstChild null

Render view from string

I'm currently trying to create a custom component that allows you to create forms (including serializing, setting values, validating and easy templating) based on objects. The catch, is that I want to generate the markup (performance and code readability reasons).

Currently, I see no simple way of doing this. I was pointed to this code: https://github.com/YoloDev/mimosa-aurelia-skeleton/blob/c5799bf35a68d26f4a8137b28b93ce3897ce3fd1/src/app/docs/behaviors/doc.js but that's not what I'd like to call simple.

So, in a nutshell: I'd like to be able to render a view based on either a string or DocumentFragment (preferably string, but I can live with the latter) for the ViewModel I'm in in stead of using a view file, which would consequently include data binding,

feature request: convenience binding for composition without view-model

It would be very convenient in some cases to be able to make the binding context of a composed view using this syntax:
<compose view="/path/to/template.html" model.bind="anObject"></compose>

Not only would this save boilerplate in very simple cases, but it would also allow an easy mental modeling for the composed view such that you could use properties of the bound model directly in the template.

For example:
app.js:

constructor() {
   this.items = [{name:"first"}, {name:"second"};
}

app.html:

<div repeat.for="item of items">
    <compose view="my-template.html" model.bind="item"></compose>
</div>

my-template.html:

<template>
    ${name}
</template>

relevant example: http://plnkr.co/edit/2qX6YJxxKORTXgP2VV8L

Specifying default value for custom element property with changed callback doesn't change value

I have a custom element defined with a property like so:

  static metadata() {
    return Behavior
      .customElement('my-element')
      .withProperty('myProperty', null, 'myProperty', 'default', 'one-time');
  }

And then in my view:

<my-element my-property="not default"></my-element>

I want to wait until the element has been attached to the DOM so that I can do some things with it, so I wrote an attached() method like so:

attached() {
  console.log(this.myProperty);
}

I would expect the value of this.myProperty to be not default at this stage but it is still default so I tried modifying my property definition to this:

.withProperty('myProperty', 'myPropertyChanged, 'myProperty', 'default', 'one-time');

And added the handler:

myPropertyChanged(newValue) {
  console.log(`changed`, newValue);
}

Except the changed handler is never called.

If I changed my property definition to this (accepting all defaults):

.withProperty('myProperty');

Then the value I see for this.myProperty in attached() is not default as expected.

useShadowDOM decorator not working

I have a custom element class and I want it to render with shadowDOM

@customElement('my-element')
@useShadowDOM
export class MyElement {
}

The rendered element should have a shadowRoot but it doesn't.

Curious facts

@customElement('my-element')
@useShadowDOM
export class MyElement {
    static beforeCompile(template) {
        console.log(this) // an object with property 'targetShadowDOM: false' when before decorator was true
    }
}

Adding a break-point in the decorator's code

function useShadowDOM(target) {
    var deco = function deco(target) {
        var resource = Metadata.on(target).firstOrAdd(HtmlBehaviorResource);
        // resource has usesShadowDOM: false
        resource.useShadowDOM = true;  // note the name is different
    };

    return target ? deco(target) : deco;
}

Create empty shadow dom when `@useShadowDOM` is used with `@noView`

At the moment when @useShadowDOM is used with @noView nothing will happen.
It would be nice if the framework can create an empty shadow dom for you in that case.

detect jspm app name configuration for html templates

I'm moving this issue here from the framework repo.
Here is my jspm custom configuration in my package.json.

{
  "jspm": {
    "name": "my-app",
    "directories": {
      "baseURL": "src",
      "lib": "src/app",
      "packages": "vendor"
    },
    "dependencies": {
      "aurelia-bootstrapper": "^0.9.1"
    }
  }
}

Application scripts are in the app folder(e.g. app.js) and when I want to import them they are prefixed with 'my-app', like import {App} from 'my-app/app';. So I had to add my app module to the aurelia-app attribute: aurelia-app='my-app/app' and it worked, my app script is being imported, the problem is with the associated template, it tries to download it from /my-app/app.html but it's in /app/app.html.
I fixed it for now implementing getViewStrategy and returning an absolute path to my view but I think this should be considered.
Now all my classes look like this:

export class MyComponent {
    ...
    getViewStrategy() {
        return '/app/my-component/my-component.html';
    }
}

Do you have a better solution, this is kinda ugly.

selected-item.bind not working--requires explicit selected-item.two-way

When using the select element selected-item.bind does not updated the view model property. However setting the binding as selected-item.two-way works as expected.

feature request: support for loading css through the es6 module loader

It would be nice to be able to use module names in link tags to refer to stylesheets inside installable packages, or just to be able to use the config.js to map paths to css files. i.e. :

<link href="modulename/style.css!">

maybe this can be added to the <require> element

This can then also be used to load in less or other formats using the systemjs plugins.

can't bind value in child VM to top level setter

I'm pretty sure the title of this issue could use some work, but the problem is expressed in this plunkr.

Basically, I have two elements: my-element, and my-other-element. my-other-element is a widget which provides a text box that modifies a single @bindable "myotherattr". my-element contains a my-other-element, and binds its local setter "something" to my-other-element's "myotherattr", and then below that displays the context of "myattr". Something simply sets the value of "myattr".

I understand this seems very contrived, but I believe it should be expected to work? My expectation was that a letters were typed into the text box, they would show up in the "Value" display.

Syntax suggestion for the change handler of a select

This is just a suggestion for handling the onchange of a select element.
This is how i would do it in html:

<select onchange="onChange(this.value)">

It would make sense then that the following would also work in aurelia:

<select change.delegate="onChange(this.value)">

(in the spirit of keeping things like html)

But as i understand it you would need to use a ref attribute to make this scenario work in aurelia, because the this.value would not work to pass the value of the select as an argument to the function.
Or you could use value.bind to bind to a model.

I was just wondering if also making the above syntax work would make sense ?

Alias Behavior with Behaviour

Some of us from the UK would like to see Behavior aliased with Behaviour as we are used to typing it with a u.

[Feat. Req] Custom Element class

In the view of a custom element, we currently put:

<template>
    ...
</template>

The template element is embedded and replaced with the name of the view-model. Let's assume I have a custom element named message for example. The embedded object would look like the following:

<message class='au-target'>
    ...
</message>

It would be nice if we could also apply a class directly on this embedded object. Currently we would have to @inject(Element) and programmatically add the class. It would be nice to have the much simpler and more logical convention as follows:

View

<template class='message'>
    ...
</template>

Embedded As

<message class='au-target message'>
    ...
</message>

Deleting Item From Array In Repeat Using Delegate Causes jQuery Error

See the code in this gist:
https://gist.github.com/sunjay/93de4baf2989ff865f47

Starting with the navigation app, I added this to welcome.html:

<div repeat.for="item of items">
    <button type="button" class="close" aria-label="Close" click.delegate="$parent.deleteItem(item)"><span aria-hidden="true">&times;</span></button>
    ${item}
</div>

And this to welcome.js:

  constructor(){
    ...
    this.items = [1, 2, 3];
  }

  deleteItem(value) {
    const index = this.items.indexOf(value);
    this.items.splice(index, 1);
  }

The problem lies with using click.delegate. When the item is deleted, jQuery throws an error.

Uncaught TypeError: undefined is not a function                         jquery.js:1446
Sizzle.attr                                                             jquery.js:1642
Sizzle.selectors.filter.ATTR                                            jquery.js:2143
i                                                                       jquery.js:2361
superMatcher                                                            jquery.js:2531
Sizzle.select                                                           jquery.js:850
Sizzle                                                                  jquery.js:4475
jQuery.event.handlers                                                   jquery.js:4412
jQuery.event.dispatch                                                   jquery.js:4116
jQuery.event.add.elemData.handle                                        jquery.js:4116

This might have something to do with how the events are being unbinded. You'll notice that the error does not actually occur in any of my added code. It executes afterward.

The error does not occur if I replace .delegate with .trigger

string interpolation does not respect skipContentProcessing

I created a custom element (named resource-pooled) that has the skipContentProcessing metadata added. However, in the constructor of the ResourcePooled behavior class, if I inspect the node, I see the following:

The original html:

  <resource-pooled>
    <div>I am so testing pooling here...</div>
    <div>Title (bound value): ${post.title}</div>
  </resource-pooled>

I would expect the html to maintain the interpolation-string (so that I can compile it myself), rather than having injected a value.

Animation support for Aurelia

This issue is meant to track ideas and discuss how animation support may work with the Aurelia Framework. All ideas are welcome, if the amount of comments gets to crowded we can also switch to a Wiki-Page.

The current approach is to simulate the functionality of Angular 1.x provided by the ngAnimate Service

This means the system as a first step will be css class-based and thus provide a simple solution for CSS Libraries like Animate.css.

The main actor, the Animator Service, will provide those features by providing a public interface with following methods:

Enter: a new Element is attached to the DOM ( e.g. attach a new view )
Remove: an existing Element is detached from the DOM ( e.g. detach view )
Move: an existing Element is moved inside the DOM tree ( e.g. reorganize underlying array of a repeater)
AddClass: adding a class to an existing Element (e.g. aurelia-hide)
RemoveClass: removing a class from an exsting Element (dito)

On top of that though we would like to make the Animator Service exchangeable. Means if you need specific features or wan't to support a different library, like Famo.us or Greensock which require special modifications, you can use another implementation of the Animator Service.

Working against a known interface is important because that way your custom elements or attachedBehaviors may use the Animator Service as well (think of special Shadow DOM manipulations etc.)

EDIT:
The usage of the Animator should allow opt-ins, means the default implementation should do exactly nothing, so Users who do not wish to have Animation support won't have to sacrifice performance, although it's minimal.

Additional plugins should provide concrete implementations of a specific Animator, like the above mentioned CSS-Animator. After plugging that in, it should replace the default Animator.

Here are two animated-gifs of hide/show and repeater-items-enter to give you an idea what this could look like:

Template Parts

Custom elements should be able to have "parts" of their default views that are replaceable when the custom element is used. For example, if a custom element has an internal repeat.for, it might want to indicated that the template for the repeater can be replaced by the consumer of the custom element. The element view might look like this for "my-element":

<template>
  <ul>
    <li repeat.for="item of items" part="item-template">
      ${item}
    </li>
  </ul>
</template>

Then the consumer of "my-element" could write this:

<my-element items.bind="people">
  <template replace-part="item-template">
    <li>${item.firstName}</li>
  </template>
</my-element>

Parts and their contextual variables would need to be documented by the creator of the custom element, but this would enable a lot of interesting scenarios, especially those that content selectors cannot handle.

Simplify Behaviors

Standardize on two behavior types: CustomElement and CustomAttribute. Allow template behaviors to be configured via metadata on both of these. Rework the behavior metadata to simplify and minimze number of objects involved. As part of this work, improvements can be made to metadata lookup speed as well as support for ES7 decorators.

Where is "anchor" coming from on line 18 of content-selector?

https://github.com/aurelia/templating/blob/master/src/content-selector.js#L18

function findInsertionPoint(groups, index){
  var insertionPoint;

  while(!insertionPoint && index >= 0){
    insertionPoint = groups[index][0];
    index--;
  }

  // this line
  return insertionPoint || anchor;
}

This came up during @cmichaelgraham's work on TypeScript. Just wondering if the || anchor part should be removed? Line 88 https://github.com/aurelia/templating/blob/master/src/content-selector.js#L88

var anchor = findInsertionPoint(this.groups, index) || this.anchor,

Looks to be the only place this function is called, so we're curious.

A method to get the markup for a template

In angular there is a $templateCache service that can be used to request the markup for a specific template:

var markup = $templateCache.get(templateName);

Is there a way to accomplish the same thing for a view in Aurelia? If not could this be added? I have some situations where I wish to read some data- attributes from a view prior to in being rendered in the DOM.

Create a helper api for dispatching custom events

It would probably be a good idea to have a simple way to dispatch custom DOM events, given how easy it is to consume them in Aurelia. This could greatly improve the way components communicate instead of simple pub/sub patterns.

template if.bind= doesn't work

Documentaion (http://aurelia.io/docs.html#if) has sample showing if.bind used with template. This doesn't work. If.bind seems to be working with other tags (h, div, secrion) but not with template. To reproduce, clone https://github.com/aurelia/skeleton-navigation.git, in src/welcome.js add:

this.showTemplate = false; //in constructor

 toggle(){
    this.showTemplate = !this.showTemplate;
  }

in welcome.html, add if.bind="showTemplate" to template and h2 (title) tags, and button somewhere in the form:

 <button click.trigger="toggle()">Toggle</button>

When button is clicked title is being hidden/shown as expected, but template content remains visible.

[Addon] Utilise `.jade` files using custom `JadeView` and `JadeConventionView` classes

I've developed a custom ViewStrategy that allows the user to utilise the SystemJS jade plugin to load .jade and pre-compiled .jade.js files just as you would normal .html files.

Examples and the code for which can be seen at my repo: https://github.com/Craga89/aurelia-jade-viewstrategy

Can I get your thoughts on this? Is this the best way to achieve this?

Make syncChildren work with composed views.

The issues is that syncChildren isn’t getting applied at all because when you do a dynamic composition, you aren’t actually creating a custom element, just injecting the view/view-model into the compose element. The syncChildren implementation is only designed to work with custom elements and custom attributes.

Let's extend things a bit so that compose and router-view can send along a "host" element to use to attached the mutation observer to. This host will be the compose element or the router-view element itself. The caveat is that this will not work if someone chooses to leverage the upcoming containerless setting for the compose and router-view elements because then there will be no container node to attach and scope the dom mutation observation to.

<template repeat.for="" /> is not rendering in IE11

I have a view that looks like

<template repeat.for="item of collection">
  <!-- some stuff -->
</template>

Here's the actual template.

In Chrome (and Safari) this is render as expected, however it does not render correctly in IE11.
Instead, it renders the template once, even if the collection is empty.

Here's a live example, please compare this in Chrome with it in IE11.

Potentially unhandled rejection [1] ReferenceError: childContainer is not defined

Issue occurs when using the element with only a view attribute, as follows:

<compose view="views/start.html"></compose>

Stack trace from DevTools:

Potentially unhandled rejection [1] ReferenceError: childContainer is not defined
at http://localhost:9000/jspm_packages/github/aurelia/[email protected]/system/composition-engine.js:147:47
at O (http://localhost:9000/jspm_packages/es6-module-loader.js:7:7462)
at K (http://localhost:9000/jspm_packages/es6-module-loader.js:7:7094)
at y.7.y.when (http://localhost:9000/jspm_packages/es6-module-loader.js:7:10248)
at v.7.v.run (http://localhost:9000/jspm_packages/es6-module-loader.js:7:9284)
at a.3.a._drain (http://localhost:9000/jspm_packages/es6-module-loader.js:7:1763)
at 3.a.drain (http://localhost:9000/jspm_packages/es6-module-loader.js:7:1417)
at MutationObserver.b (http://localhost:9000/jspm_packages/es6-module-loader.js:7:3325)

String interpolation renders nothing for number 0

String interpolation in a template renders nothing when bound to a property with number value 0.

@bindable with default value of {} fails to bind properly

See code here.

In this example, the "my-element-form" custom component has an attribute called "mydata" which is bound to an object that looks like:

{
  one: { value: "test1" },
  two: { value: "test2" }
}

When the attribute definition omits a default value, this works fine and you can see that the list to the right lists two entries "one" and "two" respectively. When the attribute definition specifies @bindable mydata = {} the list is always empty.

Attached Behavior in Custom Element gets Shadow DOM injected

So this appears to be happening only to a Custom Element inside another Custom Element. The top level is having styles applied just fine, but the inner element has a show behavior on it, and as you can see it only gets applied to the shadow DOM.

Debugging confirms that the Attached Behavior receives the shadow DOM element, not the light dom one. This is done using the Tab Control / Tab Item that @EisenbergEffect shared in Gitter.

Creating templates dynamically via javascript ?

In the Aurelia blog "Q&A" , there is an example of generating a custom element via the React.JS library and bypassing aurelia templating engine.

Is there also a way to create aurelia templates dynamically via javascript ?

Let's say one creates an aurelia template via es6 templates strings functionality, is it possible to bind that template into the view class directly into javascript ? That is, inlining the template into the view class ?

Attached Behavior properties that are not the "attached behavior's attribute" bound with `.call` are always undefined

Behavior - https://github.com/yelvert/aurelia-interface/blob/ddd7c13be1b32984ba1b7da494cbec6220ddab83/src/ai-tabs.js#L6-L8
Use in HTML - https://github.com/yelvert/aurelia-interface/blob/b89c458bce73967c9fbb6b27f81eb78f5ca7df9e/src/tabs-demo.html#L3
Parent VM - https://github.com/yelvert/aurelia-interface/blob/b89c458bce73967c9fbb6b27f81eb78f5ca7df9e/src/tabs-demo.js#L7-L13

In the attached behavior, _showTab and _hideTab are always undefined.

Sorry if this is the wrong repo for this issue.

Proposal: Allow CustomElements and AttachedBehaviors to expose API on Elements

To sum:

import {Behavior} from 'aurelia-templating';

export class ExampleAttachedBehavioer {
    static metadata() {
        return Behavior
            .attachedBehavior("example")
            .exposeClass("example");
    }

    static inject() { return [Element]; }

    constructor(element) {
        this.element = element;
    }

    doThing() {
        this.element.classList.add("thing");
    }

    undoThing() {
        this.element.classList.remove("thing");
    }
}

Usage:

// ...stuff....
var elem = $("#myElement")[0];
elem.example.doThing();

make the  comments optional in the DOM

Currently the templating will create comments in the dom.
it would be nice if this can be disabled so that can also get out of your way as @Aedaeum pointed out.

if @EisenbergEffect can confirm these are not "needed" i wouldn't mind creating a PR to make them optional , perhaps using a createComments boolean property on the ViewCompiler.

Compile linked stylesheets of shadowDOM custom elements

When I have a <link rel='stylesheet' href='...' /> inside a template of a custom element using shadowDOM I expect it to be fetched and in-lined inside the shadow root just like polymer does.

Bug: "UseView" in view-strategy.js is undefined, preventing getViewStrategy from returning relative path strings for view selection

This issue cropped up because I tried to dynamically select a view using a relative path string returned in my getViewStrategy() function. The erroneous code is here:

https://github.com/aurelia/templating/blob/master/src/view-strategy.js#L13

I suspect the code should actually read:

value = new UseViewStrategy(value);

[Feature] Containerless composition

Unlike Durandal 2.x the framework doesn't seem to support Containerless composition, which could be a sticking point for folks utilising that functionality who want to eventually migrate.

Once I'm more accustomed to Aurelias internals I'll have a crack at implementing it and send a PR your way.

support property change handling in dynamic options properties

Shorter syntax for binding multiple properties with convention

A shorter version for binding multiple properties would be nice if you are using convention.
ie instead if doing:

@bindable("foo")
@bindable("bar")
@bindable("bla")

one could do it in one line if the bindable properties do not need any extra options.

@bindables("foo","bar","bla")

Allow for module-global view-strategies.

Currently I use the following to set the view strategy (view factory factory) of my view model:

import {Router} from 'aurelia-router';

import view from './app.html!';

export class App {
  static inject() { return [Router]; }
  constructor(router) {
    this.router = router;
    this.router.configure(config => {
      config.title = 'Application Title';
      config.map([
        { route: 'blog',      moduleId: './blog/routes/index', nav: true, title: 'Blog' },
        { route: '',          moduleId: './redirect', redirect: '/blog' }
      ]);
    });
  }

  getViewStrategy() {
    return view;
  }
}

I would really like it though, if I could do something like this instead

import {Router} from 'aurelia-router';

export {view} from './app.html!';

export class App {
  static inject() { return [Router]; }
  constructor(router) {
    this.router = router;
    this.router.configure(config => {
      config.title = 'Application Title';
      config.map([
        { route: 'blog',      moduleId: './blog/routes/index', nav: true, title: 'Blog' },
        { route: '',          moduleId: './redirect', redirect: '/blog' }
      ]);
    });
  }
}

This basically creates a property on the module, named view, which acts as a module-global view factory factory.

Enable CustomElement to handle content manually

Problem

Currently there is no way to pass raw content into the innerHtml of a CustomElement and have it manually processed.
ex:

<x-markdown>
    Title
    ======

    # Items
    ....
</x-markdown>

Attempted to consume the markdown within the CustomElement is impossible, as Aurelia will attempt to process it.

Solution

Add a Metadata extension which allows you to signal Aurelia that the CustomElement will parse it's inner content it's self.

Recommendations:

Metadata.handlesContentManually();
Metadata.skipProcessingContent();

HTMLBehavior Pipeline Hooks

It would be nice if we can hook into certain events in the HTMLBehavior pipelines to allow custom behaviors to be created.

One use case could be to create some new decorators for handling various scenarios for working with css, example proposal here

I think a hook for the analyze, load , and create phases of the html-behaviours should do it, perhaps there is also some hooks needed in the composition engine.

The hooks could be used for various other cases in the future.

repeat.for breaks inside custom element

In the following scenario the initial load works fine but when the "next" button is clicked the following exception occurs:
Uncaught TypeError: Cannot read property 'length' of undefined(full stack at end).

scenario:

Using a custom element to layout a repeaterwithin a div.

View:

<template>
    <h3>${title}</h3>
    <button class="btn btn-default" click.delegate="dataSource.nextPage()">Next Page</button>
    <repro-layout>
        <template repeat.for="item of dataSource.data">
            ITEM ${item} <br/>
        </template>
    </repro-layout>
</template>

View Model:

import {inject} from 'aurelia-framework';
import {ReproDataSource} from './repro-datasource';

@inject(ReproDataSource)
export class ReproVm {
    constructor(dataSource) {
        this.title = 'repro repeat error on custom element';
        this.dataSource = dataSource;
    }

    activate() {
        this.dataSource.load();
    }
}

Custom Element View:

<template>
    <div style="background-color: yellow; padding: 20px;">
        <content></content>
    </div>
</template>

Custom Element View Model:

import {customElement} from 'aurelia-framework';

@customElement('repro-layout')
export class ReproLayout {

}

Data Source Class:

export class ReproDataSource {
    constructor() {
        this.data = [];
    }

    load() {
        this.data = [1,2,3,4,5,6,7,8,9,10];
    }

    nextPage() {
        this.data = [11,12,13,14,15,16,17,18,19,20];
    }

}

Error Stack:

@bindable's defaultBindingMode property don't work.

If you specify a default binding mode in @bindable decorator It will not be used when you bind you attribute throught .bind.

<my-custom-element  my-attribute.bind="foo"></my-custom-element>

if my-attribute is defined as

@bindable({ name: 'myAttribute', attribute: 'my-attribute', defaultBindingMode: TWO_WAY})

foo will not be updated.... but if you use:

<my-custom-element  my-attribute.two-way="foo"></my-custom-element>

then foo will be updated as expected.

I'll make a repro on top of skeleton-nav later...