These are chat archives for canjs/canjs

13th
Nov 2017
Eben
@eben-roux
Nov 13 2017 04:19
@nriesco unbelievable! pffft... something so simple!
thanks!
something else I'm struggling with is that I'm building bootstrap dropdowns for the navbar and they seem to be "grouped" under the component's element:
blob
adding those same elements adjacent to the element results in a proper layout:
blob
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          cs-nav-dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">

            <a class="dropdown-item" href="#">item-1</a>

            <a class="dropdown-item" href="#">item-2</a>

            <a class="dropdown-item" href="#">item-3</a>

        </div>
      </li>
      <cs-nav-dropdown items:from="items" />
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          cs-nav-dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">

            <a class="dropdown-item" href="#">item-1</a>

            <a class="dropdown-item" href="#">item-2</a>

            <a class="dropdown-item" href="#">item-3</a>

        </div>
      </li>
    </ul>
my the html produced looks like this:
blob
Eben
@eben-roux
Nov 13 2017 04:24
how can I get all the items side-by-side?
Eben
@eben-roux
Nov 13 2017 09:35
What I'm thinking is that the wrapping of the <li> tags within the <cs-nav-dropdown> may be the issue.
Ivo Pinheiro
@ivospinheiro
Nov 13 2017 15:23

Hi guys,
Is there a good way on can-component to add an event listener to called whenever there is a change of any property of a DefineList item?
Something similar to:

var ViewModel = DefineMap.extend({
  data: DefineList.extend({
    "#": DefineMap.extend({
      name: "string",
      age: "number"
    })
  });
});
Component.extend({
  viewModel: ViewModel,
...
  events: {
    "{viewModel.data} change": function(){
      //Do something
    }
  }
});

Where the change callback is called whenever name or age properties changes ?

Mohamed Cherif Bouchelaghem
@cherifGsoul
Nov 13 2017 16:51
@ivospinheiro in the template
<your-component-tag  data:on:change="thMethodInTheViewModel" ></your-component-tag>
for every map in the list you can make it with the help of a loop like {{#each }}
Ivo Pinheiro
@ivospinheiro
Nov 13 2017 17:18
is there any alternative to do it inside the component instead of doing it in the view?
Kevin Phillips
@phillipskevin
Nov 13 2017 17:20
you can make a separate property that serializes your list
and listen to changes in that
get serializedData() {
  return this.list.serialize();
}
Justin Meyer
@justinbmeyer
Nov 13 2017 17:52
@ivospinheiro yeah, what @phillipskevin is the best way ... though you could also use this.list.get()
Ivo Pinheiro
@ivospinheiro
Nov 13 2017 17:55
@justinbmeyer with @phillipskevin solution I will only know only that the item has changed but not what was the item that has changed.
I can do it comparing the newVal with the lastVal but I'me concerned with the performance, because the list can have lots of data.
Eben
@eben-roux
Nov 13 2017 18:08
anyone have any options re my issue?
Frank Lemanschik
@frank-dspeed
Nov 13 2017 22:30
@eben-roux if i understand your problem right you will want to learn css maybe
to show li elements side by side