These are chat archives for canjs/canjs

16th
Aug 2017
Viktor Busko
@Lighttree
Aug 16 2017 09:27
guys, is there ability to update bindings not on "change" but on other events to avoid this type of handling:
<input {($value)}="entity.title" ($input)="titleHandler(%element.value)" placeholder="Enter a title" type="text"/>
This titleHandler just doing:
titleHandler(title) {
        this.entity.title = title;
}
Jeroen Cornelissen
@jeroencornelissen
Aug 16 2017 09:32
@Lighttree what other events do you mean?
You could use ($blur)=“…"
Viktor Busko
@Lighttree
Aug 16 2017 09:33
the idea is to make such binding {($value)}="entity.title" work not on change but on input
Jeroen Cornelissen
@jeroencornelissen
Aug 16 2017 09:39
Isn’t dropping the {($value)}="entity.title” binding in your input enough?
<input ($input)="titleHandler(%element.value)" placeholder="Enter a title" type="text”/>
Viktor Busko
@Lighttree
Aug 16 2017 09:41
yeah, but its doing boilerplate code, because it would be better not have this kind of functions in VM so I was thinking maybe there is a way to tell bindings work from different event. it checks new $value only after you focus out from field, because of change or blur event not sure, but sometimes it is required to do something while typing or so.
Jeroen Cornelissen
@jeroencornelissen
Aug 16 2017 10:15
Recently we’re getting this error
Uncaught TypeError: Cannot define property ($click), object is not extensible
Because we have a ($click) event on a component tag.
<child-comp ($click)=“triggerEvent(…)” />
Is that a bug?
Kevin Phillips
@phillipskevin
Aug 16 2017 14:20
@jeroencornelissen sounds like a bug, yes
@Lighttree we're looking to support what you're talking about with the new can-stache-bindings syntax
so you could do something like on:input:value:to="entity.title"
canjs/can-stache-bindings#269 is the issue if you want to give a :thumbsup: or add any feedback
Jeroen Cornelissen
@jeroencornelissen
Aug 16 2017 14:22
@phillipskevin Setting seal: false solves it. But that doesn’t seem correct. I’ve commented on canjs/can-define#171, because it looks simular.
Kevin Phillips
@phillipskevin
Aug 16 2017 14:23
ok
what version of can-stache-bindings are you using?
if you're using > 3.6.0, I'd be interested if on:el:click="triggerEvent(...)" has the same problem
Jeroen Cornelissen
@jeroencornelissen
Aug 16 2017 14:25
ok, will have a try this evening
Kevin Phillips
@phillipskevin
Aug 16 2017 14:27
I opened canjs/can-stache-bindings#279 to investigate
Jeroen Cornelissen
@jeroencornelissen
Aug 16 2017 14:27
:thumbsup:
Kevin Phillips
@phillipskevin
Aug 16 2017 14:27
when you see that error, does the click handler still work?
Jeroen Cornelissen
@jeroencornelissen
Aug 16 2017 14:28
I don’t know. Will try to investigate it later today.
Kevin Phillips
@phillipskevin
Aug 16 2017 14:29
ok, thanks
Jeroen Cornelissen
@jeroencornelissen
Aug 16 2017 14:48
@phillipskevin I’ve made a comment on canjs/can-stache-bindings#279
Kevin Phillips
@phillipskevin
Aug 16 2017 15:11
thanks
will look into it today
Nico R.
@nriesco
Aug 16 2017 19:46
is there a simple tutorial/example on how to use events? the discussion you are having is way to advanced for me, I just want to trigger a function whenever the user changes a couple of input fields :-)
Kevin Phillips
@phillipskevin
Aug 16 2017 19:48
Frank Lemanschik
@frank-dspeed
Aug 16 2017 19:48
Kevin do you know a example for component value exchange
i expirence some data loose :)
Nico R.
@nriesco
Aug 16 2017 19:49
Thanks @phillipskevin!
Kevin Phillips
@phillipskevin
Aug 16 2017 19:50
can you give more info on what you're trying @frank-dspeed ?
Frank Lemanschik
@frank-dspeed
Aug 16 2017 19:50
sure i try to use bitballs pageComponent example so route changes components that get showed in index.stache
then i have on the main VM some propertys that get set and set values also right in a other component of the index.stache
when i now change the page component
index.stache looses the value that was shared
but the other component has it
:D
Kevin Phillips
@phillipskevin
Aug 16 2017 19:52
so your appVM does NOT have the value, but children do?
Frank Lemanschik
@frank-dspeed
Aug 16 2017 19:52
so we have in main a shared value from component A that get set and that sets Component B
App and Children have the value
and i made clear that the value is set i did a set(val) and setted it on a extra property on main ViewModel
to be sure that it is there :)
Kevin Phillips
@phillipskevin
Aug 16 2017 19:53
in your set(val) {} do you return the value?
Frank Lemanschik
@frank-dspeed
Aug 16 2017 19:53
so component binds value to scope and scope binds value to other Comp
and Scope looses value on change
other comp does not
yes i did return the value else it would not be showed
i did also other ways like 'any' or {value}
it looses the value in any case
Kevin Phillips
@phillipskevin
Aug 16 2017 19:54
ok... but the setter doesn't get called when it loses the value?
Frank Lemanschik
@frank-dspeed
Aug 16 2017 19:54
had nothing to do with oneway or two way binding
nope it does not
i did verify that via console.log call
in the setter
its magic
:D
Kevin Phillips
@phillipskevin
Aug 16 2017 19:55
so how do you know it loses the value?
Frank Lemanschik
@frank-dspeed
Aug 16 2017 19:55
i also found out route.data.valueName = also don't works as expected
because it don't changes the location hash
because i show the value on the index.stache templat
:D
it shows up again when i reset it via the function that sets it normaly
its inserted in the index.stache {{loosedVal}}
if your interrested and want to see that in action :) i offer you to view on anydesk
index.stache don't gets rerendered ! thats importent :)
its only a component changed via can-route and {{pageComponent}} component B the values stay as they are
comp b is in the same stache as the live binding {{loosedVal}}
but first of all should route.data.valueName = value change location hash ?
i think it should or is that the expected thing ?
Kevin Phillips
@phillipskevin
Aug 16 2017 20:00
it should change the pathname if you're using pushstate
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:00
no pushstate
Kevin Phillips
@phillipskevin
Aug 16 2017 20:00
then, yeah, it should change the hash
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:00
only hash routing i droped push state
as its incompatible for my apps :)
i always build none ssr production bundels
Kevin Phillips
@phillipskevin
Aug 16 2017 20:01
ok
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:01
ok so i will open a issue because its not changing hash
thats the first thing :)
Kevin Phillips
@phillipskevin
Aug 16 2017 20:02
you're just changing one property? and that property already exists in your route?
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:02
yes the page property
to be more exact :)
you know it from bitballs routing maybe
i have simple route({page}) like route
and only a page property to switch 4 views
Kevin Phillips
@phillipskevin
Aug 16 2017 20:03
ok
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:04
thanks for the verify i was not sure if route.data.page = viewOne should change the hash route or not
@phillipskevin do you know how it works with jquery.plugin like modules?
and steal?
Kevin Phillips
@phillipskevin
Aug 16 2017 20:05
how what works?
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:06
Loading and bundling jquery.plugins
like flot and that
$.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } })
they modify $ direct i think normal and are global modules
there are tons of such plugins
Kevin Phillips
@phillipskevin
Aug 16 2017 20:08
you just mark jquery as a dependency: https://stealjs.com/docs/load.metadata.html
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:08
(function($){$.color={}
and is that global?
do i need to mark them as global?
i am not sure because this (function syntax
Kevin Phillips
@phillipskevin
Aug 16 2017 20:09
it should be detected automatically
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:09
i am not familar with that
ok
i am still not sure how that works
when i load jquery and then load this
Kevin Phillips
@phillipskevin
Aug 16 2017 20:10
how what works?
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:10
when is flot active :) will the jquery object be modifyed?
Kevin Phillips
@phillipskevin
Aug 16 2017 20:10
if you mark jquery as a dep, steal will load jquery for you when you load flot
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:10
this jquery plugins are self executing functions that execute them self with jquery
so i import $ from jquery?
because the flot plugin is executing for example with (jQuery)
and that shouldn't be set right?
})(jQuery);
Nico R.
@nriesco
Aug 16 2017 20:11
@phillipskevin are there any tutorials or examples for dependencies? it is very common to have a third party element/component in js that requires jquery to work. I kind of did this in a plugin you helped me fix a long time ago but any other learning material would be higly appreciated.
Kevin Phillips
@phillipskevin
Aug 16 2017 20:12
import $ from 'jquery'; will set the global jQuery
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:12
so jquery needs to get Imported only once?
Nico R.
@nriesco
Aug 16 2017 20:12
@phillipskevin is this link you provided only for donejs? https://stealjs.com/docs/load.metadata.html
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:12
not in every module using it?
will all have the modifyed version then ?
as flot assigns them self to jQuery?
Kevin Phillips
@phillipskevin
Aug 16 2017 20:13
import it everywhere you need it
so you can call $.plot
there's just going to be one jQuery
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:14
so this will get modifyed by all jquery.plugin-name stuff
Kevin Phillips
@phillipskevin
Aug 16 2017 20:14
yes
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:14
and when i require jquery later i will have all the plugins
when i load them in index stache
Kevin Phillips
@phillipskevin
Aug 16 2017 20:14
yeah
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:15
ok thanks for info
Kevin Phillips
@phillipskevin
Aug 16 2017 20:15
np
@nriesco that link is for anything using steal
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:15
oh kevin one more thing from my list :)
do you know the steal settings to set the dist folder so that it don't uses the freaky folder structure
and maybe produces flat structure?
Nico R.
@nriesco
Aug 16 2017 20:16
@phillipskevin but how do you write this in can?
"meta": { "moduleA": { "sideBundle": true } }
or where?
Kevin Phillips
@phillipskevin
Aug 16 2017 20:16
in your package.json
or wherever you configure steal
Nico R.
@nriesco
Aug 16 2017 20:16
if it were a jsbin?
you can't do this in jsbin... since you're not using steal
@frank-dspeed I don't know if there's a way to do that
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:17
oh ok :)
are you familar with steal-export?
maybe i can do it with that
Kevin Phillips
@phillipskevin
Aug 16 2017 20:18
why do you want to do that?
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:18
because i have all kind of loading bugs
Nico R.
@nriesco
Aug 16 2017 20:18
ok
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:18
all the time and they don't happen with less folder structure
also droped ./src folder and that
to have less bugs
:D
Kevin Phillips
@phillipskevin
Aug 16 2017 20:18
so you just want 1 giant bundle?
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:19
would be ok yes
best would be with even bundle steal but that most times don't works
and in steal.production i can adjust some stuff in the header most times :)
Kevin Phillips
@phillipskevin
Aug 16 2017 20:20
are your bundles missing things because you're not importing them in the places you use them?
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:20
but ya right for my app usage it would be enought to have simply one global export of all the imports
no i import it all all over
i have strange errors most times like /ext/babel
is missing and that :)
but could be browser related last time i got the magic that i got always the index.stache from a other project even without donejs running
and browser cache empty and that
i got it as binary download
without a server !!!!
Kevin Phillips
@phillipskevin
Aug 16 2017 20:22
wow, must be something weird going on
not sure what it could be
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:22
like a in memory cache :)
using a other browser solved it
i have always 4 installed for such cache issues
:D
but soon all this issues are over with the new can-connect -pouchdb :)
then i store it all there no wirred caching anymore
Kevin Phillips
@phillipskevin
Aug 16 2017 20:23
to make one big bundle (which I think is a bad idea), you could try setting maxBundleRequests: 1 and maxMainRequests: 1
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:24
don't forget i do local used apps
with gigabit network :D
its a great idea to do one big bundle
it takes only some ms to download don't worry about that
Kevin Phillips
@phillipskevin
Aug 16 2017 20:25
ok
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:25
but for deployment its better
and with all the browser caching issues one big file is also better in production
easyer to address updates else you never know how much clients are using a 5 month old version of the app :)
not all do hard refresh all the times
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:32
@phillipskevin can you help me again with one big thing i just remember
i have a image gallery the famous justifiedGallery plugin :)
and that modifys content that gets rendered
i did a component that renders some pictures and importet justifiedGallery all is nice
i can fire the gallery command after getting the promis with the pictures
but when i switch the page :) this promise don't gets called again :)
i solved that via a init() wich sets a timeout but i need some other kind of view binding
so the component flow is promise get pictures then add that to the page all works nice and then call $('gallery').justifiedGaller()
that works the component renders nice but when i then switch to a other component and back to it
i need to recall $('gallery').justifiedGaller()
where should i do that?
init gets called to early that makes a timing problem for me
as it gets executed befor the images are placed in the stache via the viewModel
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:38
and the timeout can't be set so long and not so short if to short the elements are not there and if to long the user expirence is broken
Kevin Phillips
@phillipskevin
Aug 16 2017 20:38
you can use an ($inserted) event on the images
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:39
so the sync with the stache the diffing destroys the changes from justiefiedGallery
Kevin Phillips
@phillipskevin
Aug 16 2017 20:39
not sure what you mean
what diff
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:39
the vdom diffing
:D
the stache gets rendered the gallery modifys the dom then this changes don't get persisted
and when i change the component and change back
the dom gets restored
so the gallery modifycation is away
Kevin Phillips
@phillipskevin
Aug 16 2017 20:41
I don't think there's vdom diffing
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:41
but the inserted is a good idea i think you mean i can place this ($inserted)="myFunction()"
Kevin Phillips
@phillipskevin
Aug 16 2017 20:41
right
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:41
ok sounds good thanks a lot i will try that
Kevin Phillips
@phillipskevin
Aug 16 2017 20:41
or "{element} inserted": function() { ... } in the component events
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:42
i am not familar with that
i will use the inserted event that sounds logical :)
i will do that on the gallery div
@phillipskevin WOW
the inserted event imrpoved feeling by 1000%
you should document that :)
Kevin Phillips
@phillipskevin
Aug 16 2017 20:48
where would you look for it?
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:48
every tutorial used all over to init a event after the insert :)
it allows all nice stuff like messaging and all
nice notifications all that
its a key element :)
its the holy gral
for all my async dreams
Kevin Phillips
@phillipskevin
Aug 16 2017 20:49
ok
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:49
i think its in the can stache bindings and i simply don't knowed that it can be used like that
Kevin Phillips
@phillipskevin
Aug 16 2017 20:50
you can use any DOM event like that
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:50
ah thats why now i understand
its a dom event i only tought about click event and that
but yes now i see the light :D
Kevin Phillips
@phillipskevin
Aug 16 2017 20:50
the $ means DOM
in ($ ... )
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:51
ya now i see it :)
and then using can-jquery gives me dom cross bindings right
so that i can use same events also with jquery
Kevin Phillips
@phillipskevin
Aug 16 2017 20:51
yeah
Frank Lemanschik
@frank-dspeed
Aug 16 2017 20:51
i see the light :)
i often work so hard and much that i don't get this simple stuff
i only look what i am searching for and start using it
Frank Lemanschik
@frank-dspeed
Aug 16 2017 21:48
@phillipskevin do you know the stache way for rendering images: ['pic.jpg','oPic.jpg']
?
i found out each would only work when i name the keys
Frank Lemanschik
@frank-dspeed
Aug 16 2017 21:55
ah don't matters i restructured the data :)