These are chat archives for canjs/canjs

9th
Nov 2016
Frank Lemanschik
@frank-dspeed
Nov 09 2016 00:48
What do you all think about a own localisation system i think thats something missing in the components i think i8n is standart today for all web components
Nico R.
@nriesco
Nov 09 2016 01:49

When using a custom component in canjs, how can I access the dom element (or anyway to access it via jquery) where it was triggered?

Imagine I have two typeahed elements but in the component I have something like $('#typeaheadElement').typeahead(someParams)

That works when you only have one typeahead, but if you add a second one using an element id won't.

I'm listening to the inserted event like this:
https://canjs.com/docs/can.Component.prototype.events.html

Kevin Phillips
@phillipskevin
Nov 09 2016 02:20
this.element @nriesco
Nico R.
@nriesco
Nov 09 2016 03:11
@phillipskevin it worked! thanks again. I realized that I can either read from this.element or from the first parameter received by the ‘inserted’ event. If anyone is wondering you should reference it like this: $(this.element).typeahead(someParams)
Nico R.
@nriesco
Nov 09 2016 03:20
@phillipskevin I made a mistake.. that didn’t work… :-(
Kevin Phillips
@phillipskevin
Nov 09 2016 03:23
What isn't working about it?
Nico R.
@nriesco
Nov 09 2016 03:32
export default Component.extend({
  tag: 'typeahead-component',
  viewModel: ViewModel,
  template,
  events: {
    "inserted": function(param1) {
      // option 1
      $(this.element).typeahead(paramObject);
      // option 2
      this.element.typeahead(paramObject);
    }
  }
});
Kevin Phillips
@phillipskevin
Nov 09 2016 03:37
What is the issue with that?
I think typeahead wants an input element, so you probably need $(this.element).find('input').typeahead(...)
Nico R.
@nriesco
Nov 09 2016 05:06
@phillipskevin now it really seems to work...
I had another issue: I think I was trying to reference an element before it was created. I had to add $(document).ready(function() {… before setting typeahead
qantourisc
@qantourisc
Nov 09 2016 15:32
Tried a few combination of {{object.@index}} in order to access an object by the index by {{#each}} only {{@index}} seems to work. (I have 2 object/arrays I need to combine in a view client-sided)
qantourisc
@qantourisc
Nov 09 2016 15:51
my problem ofcourse is I am trying to do something illogical, as @index is not accessible in this manner
qantourisc
@qantourisc
Nov 09 2016 16:13
I'll do it the hard way: make a more complex data structure
Kevin Phillips
@phillipskevin
Nov 09 2016 17:06
@qantourisc if you’re using 3.0, you could try {{object[@index]}}
qantourisc
@qantourisc
Nov 09 2016 17:45
not on 3 yet, changed the data-structure, it's a tad more complex, but very mannagable.
Kevin Phillips
@phillipskevin
Nov 09 2016 17:46
ok
Juarez Rudsatz
@juarezr
Nov 09 2016 19:17
Hi, I'm building some canjs components for learning canjs, donejs, node programming.
I need help understanding the way all works. Can somebody help with some doubts?
For example, what is the proper way of creating a enumerable property?
My component have a color property that must seen one value in a list, like red, green, blue, etc...
qantourisc
@qantourisc
Nov 09 2016 19:45
Don't think this is a canjs problem iirc, you must check that youseld ?
to my knowledge you check that during init of your component
Gregg Roemhildt
@roemhildtg
Nov 09 2016 19:49
You can do check it in a set property too. I've seen it done in a type property also here
qantourisc
@qantourisc
Nov 09 2016 19:50
nice build in support
Juarez Rudsatz
@juarezr
Nov 09 2016 20:06
thanks for the response.
next question: I will share the allowed values with other components.
How is the best way of sharing the definition and allowed values?
Gregg Roemhildt
@roemhildtg
Nov 09 2016 21:58
You could create a property on the viewmodel, that has an array of the allowed values. Then you can pass the array to other components using the stache binding syntax.