Accessing models bound in the DOM

[MarcScheib]

Hi,

I have created the following stuff in Aurelia Beta and PreBeta (both available at https://github.com/MarcScheib/aurelia-dom-binding/tree/master and https://github.com/MarcScheib/aurelia-dom-binding/tree/pre-beta).

Versions are: aurelia-bootstrapper@^0.17.0 vs 1.0.0-beta.1.1.4 aurelia-dependency-injection@^0.10.1 vs 1.0.0-beta.1.1.5 aurelia-framework@^0.16.0 vs 1.0.0-beta.1.1.4

I have a custom element Model (View and ViewModel), and the corresponding model. In my index, I create four of the models and show them via the Model element in the view:

    for (let i = 0; i < 4; i++)
    {
      let model = new Model(i % 2 == 0 ? 'black' : 'white');
      this.models.push(model);
    }

and

  <require from='./model-element'></require>
  <div id="list">
    <model model.bind="model" repeat.for="model of models"></model>
  </div>

My VM is:

@customElement('model')
export class ModelElement {
  @bindable model;
}

The ViewModel is:

<template>
  <span>${model.color}</span>
</template>

And the Model:

export class Model {
  constructor(color) {
    this.color = color;
  }
}

Now, if I try to access the model (that is bound in the index view model.bind="model") via document.getElementById('list').children[0].model.model, then this is working for pre beta and I get the correct model. However, with the current beta release, document.getElementById('list').children[0].model is undefined.

Now my question: has something changed regarding the binding or am I doing something completely wrong? Does the behavior relate to the fix mentioned in https://github.com/aurelia/framework/issues/311?

[MarcScheib]

Hi guys,

do you have any updates on this? Is this perhaps the wrong repository?

Best Regards

[EisenbergEffect]

Some internal structures have changed before the beta, yes. Can you create a simple app that reproduces this and drop the src folder into this issue? If I can just drop some code directly into our skeleton, I can take a quick look and make sure it's not a bug and then advise you on a path forward.

[jdanyow]

I think @MarcScheib might be looking for domElement.au.<element name>:

https://gist.run/?id=612dd7dfe7275d81a0ed0be903ccd1bd

[MarcScheib]

@EisenbergEffect I have a created a Gist for the beta version which is not working based on @jdanyow Gist: https://gist.run/?id=b5592d7fae27547d252de9bb0b9bba8d

This working pre beta. I have a created a sample repo (see OP) for both versions: https://github.com/MarcScheib/aurelia-dom-binding/tree/master https://github.com/MarcScheib/aurelia-dom-binding/tree/pre-beta

@jdanyow A Gist based on your suggestion: https://gist.run/?id=516969466d193d6781f8c28a7d3d4421 It works like this but is it the correct way to go?

[EisenbergEffect]

Yes, explanation of this au.model.viewModel.model is as follows.

• au - access all Aurelia behaviors associated with the element
• model - access the controller for the model custom element
• viewModel - access the view model; the instance of the class that was written by the developer

[MarcScheib]

Great, thank you for your support!

[kamenac]

Does this still apply?

I don't have the .au property on the elements.

I use aurelia-templating-binding package version 1.2.0.

Btw. the Gist https://gist.run/?id=516969466d193d6781f8c28a7d3d4421 mentioned by @MarcScheib works fine.

[ttquang1063750]

Hi @kamenac
if I add attribute containerless to the model component, how can I get the scope of the model? this is your Gist that I had changed https://gist.run/?id=47770017ff2289eac9ba010945809c48

[kamenac]

Sorry, I don't know from the top of my head.

I don't use Aurelia in every day life at the moment.

On Sat, Sep 8, 2018 at 6:05 PM Tang Thanh Quang notifications@github.com wrote:

Hi @kamenac https://github.com/kamenac if I add attribute containerless to the model component, how can I get the scope of the model? this is your Gist that I had changed https://gist.run/?id=47770017ff2289eac9ba010945809c48

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aurelia/templating-binding/issues/85#issuecomment-419653936, or mute the thread https://github.com/notifications/unsubscribe-auth/AIHg89iA6lhU4zsG4gcxKaj9eoCzxtdwks5uY-rAgaJpZM4Hvi7k .