Custum element binding repeat

Help Requests
1

hello guys i’m new to aurelia so pls help,

im trying to bind a custum element mutiple time on a same custum element.

exemple:

home.html/js

<template>

      <**msgfromat type.bind="type[1]" msg.two-way="msg[1]"></msgfromat>**

        <h3>Profile</h3>
        <p>Lorem ipsum Do commodo in proident enim in dolor cupidatat adipisicing dolore officia nisi aliqua
        incididunt Ut veniam lorem ipsum Consectetur ut in in eu do</p>

      <profil></profil>

  <div class="row section-intro">
    <div class="col-twelve">

      <**msgfromat type.bind="type[2]" msg.two-way="msg[2]"></msgfromat>**

      <h5>Resume</h5>
      <h1>References</h1>

      <p class="lead">Lorem ipsum Do commodo in proident enim in dolor cupidatat adipisicing dolore officia nisi aliqua
        incididunt Ut veniam lorem ipsum Consectetur ut in in eu do.</p>

    </div>
  </div> <!-- /section-intro-->

    <experiences></experiences>

    <formations></formations>

</section> <!-- /features -->

</template>

------------------------------------------------------------------------------------
msgfromat.html

from.html/js

<template>
  <div **id="xxxxxxx"** class="popup-modal slider mfp-hide"> 
    <div class="formadds">
      <form role="form" action="" id="formedit" submit.delegate="submit($event)">
        <fieldset>
          <legend>${type}</legend>
          <div class="form-group">
              <label for="">presentation text</label>
              <textarea name="textmsg" class="form-control" id="txtarea1" rows="10" value.bind="textareaval & validate"></textarea>
          </div>
        </fieldset>
      </form>
    </div>

    <div class="link-box addforms"><button type="submit" form="formedit" class="validebtn">valider</button></div>
  </div> <!-- /form-present -->

voilà, i would like u guys to help me on multiple time’s the same CustElement with differente bindale
on home.html/js

and to bind the id on from.html/js like :
id:${‘from-’ + type1}
–i already tried it no result

help me pls

1 Like
2

Welcome to Aurelia :heart:

From the question description, it’s a bit hard to know what your intention is, could you help make it easier to show where your issue is, via an online demo? You can start with this https://codesandbox.io/s/3193yv870p , I’ve prepared home.js and home.html.

3

Hello, thank for your answer

i’ve recreated the problem in the following address:

and I put a lot of explanatory comments

sry if that sucks im to new for sand box or aurelia :blush:
thanks again.

1 Like
4

I was able to get your example up and running at https://codesandbox.io/s/6x1w8xnl3k But I am still not sure about the error you got. Can you try update that codesandbox to show where the issue is?

There are few typos:

In formmodel.js

- import { bindable, bindablemode } from "arelia";
+ import { bindable, bindingMode } from "aurelia-framework";

In formcall.html:

-  <require from="./formmodel.html"></require>
+  <require from="./formmodel"></require>

Here you want to require the formmodel view model, which is from formmodel.js file. If you use formmodel.html, it’s a html-only-custom-element.

1 Like
5

thx, for your help, i got this

1 Like