boundTo is ignored and class default values are used to render view

[sebandres]

I'm submitting a bug report

• Library Version: "aurelia-loader-nodejs": "1.0.1", "aurelia-pal-nodejs": "1.0.0-beta.1.0.0", "aurelia-protractor-plugin": "1.0.3", "aurelia-testing": "1.0.0-beta.3.0.1", "aurelia-webpack-plugin": "2.0.0-rc.2",

  "aurelia-bootstrapper": "2.1.1", "aurelia-fetch-client": "1.1.2", "aurelia-framework": "1.1.4", "aurelia-history-browser": "1.0.0", "aurelia-loader-webpack": "2.1.0", "aurelia-logging-console": "1.0.0", "aurelia-pal-browser": "1.2.1", "aurelia-polyfills": "1.2.2", "aurelia-router": "1.3.0", "aurelia-templating": "1.4.2", "aurelia-templating-binding": "1.3.0", "aurelia-templating-resources": "1.4.0", "aurelia-templating-router": "1.1.0",

Please tell us about your environment:

• Operating System: OSX 10.12.6

• Node Version: 8.6.0

• NPM Version: 5.3.0

• JSPM OR Webpack AND Version webpack 3.3.0

• Browser: node? just running npm run test on the skeleton-typescript-webpack example

• Language: TypeScript 2.4.1

Current behavior: Rendered component ignores a new bindingContext when using boundTo.

Expected/desired behavior: boundTo replaces the default values on the class and aurelia renders an output that matches the new boundTo binding context provided in order to simulate different scenarios for the same component.

Steps to reproduce

1. git clone https://github.com/sebandres/skeleton-navigation.git aurelia-skeleton-navigation
2. cd aurelia-skeleton-navigation/skeleton-typescript-webpack/
3. npm i
4. npm run test

I have forked the skeleton-navigation repo and added a boundTo call in welcome.spec.test on the skeleton-typescript-webpack project to prove the point. After the change both the snapshot test as well as the should render first name tests still pass when they should fail based on the different bindingContext.

[tomtomau]

It is my understanding that this is not a bug, but rather a simple misunderstanding of the examples :)

boundTo will simply create scoped data for use in the view.

By that I mean, the view you're using is

<welcome></welcome>

But if you changed to:

Hello ${firstName}, how are you?
<welcome></welcome>

Then this will render "Hello Peter, how are you?".

When the templating goes through, it sees ${firstName} and can replace this with a value because you've set a boundTo object with the same key.

But now you need to get it into your component!

---

In your welcome case, there are four properties on the Welcome component, but the framework doesn't make these bindable by default. You need to add the @bindable decoration to tell the framework to support it.

See here for an example usage for what you're trying to achieve

Likewise, be aware that you're not strictly testing just the component - you're actually testing a view, by using inView - that's fine, but that means you'll need to add first-name.bind etc to this view.

Also, for what its worth, technically in Aurelia, this Welcome object can be used as a component, but be aware that in the example in this repo, it's actually being used as a view model for a route, which is why it didn't have the @bindable() decoration.

---

Welcome to Aurelia :) (and Brisbane!)

[sebandres]

Hi @tomtomau!

Indeed your example does show how to use binding properly, I guess a more complex example might be in order for the docs to help newcomers to the framework :D

My goal was to test the component as whole (View and Code) to simulate different renderings of different inputs.

I did try something similar to what you posted unfortunately I must have not gotten the right combination of inView, bindable decorators and boundTo to make it work as I expected.

Thanks again and looking forward to doing a lot more Aurelia in the future!