These are chat archives for canjs/canjs

17th
Nov 2017
Julian
@pYr0x
Nov 17 2017 00:47
hey @phillipskevin i made a example with the problem i have with editing and 2-way-binding
Julian
@pYr0x
Nov 17 2017 00:54
even that simpler example is not working: http://jsbin.com/bayefiy/edit?js,console,output
pavankmv
@pavankmv
Nov 17 2017 10:03
@chasenlehara thank you for the reply. Here id is a string and sample#name comes from the value of id. My requirement is same as below open issue in github forum.
canjs/can-connect#374
Frank Lemanschik
@frank-dspeed
Nov 17 2017 10:22
@pYr0x sorry that i ask but i would wonder if that examples would work
can you tell where do you get the innerHTML Changed events?
i will easy explain you livebinding
live binding means that your element fires events on change can-js simply makes viewModel.on("valueName") events if a value changes
can-stache and can-view-bindings + can-dom-data-state doing the most of the magic with livebindings
that means you need some html element fire dom events
Frank Lemanschik
@frank-dspeed
Nov 17 2017 10:35
i make it short you need probally can-component
else this all can't work can-stache + can-define-map !== livebinded document fragments :)
i think to be more exact as this don't has a context without the component can-view-callbacks don't fires right
@pYr0x http://jsfiddle.net/rniemeyer/LkqTU/ try this as a workaround
Frank Lemanschik
@frank-dspeed
Nov 17 2017 10:40
simply load knockout for your binding syntax it works out of the box with can-define-map
i think
Julian
@pYr0x
Nov 17 2017 10:54
@frank-dspeed i thought my example would work with input. i check that you. btw. @phillipskevin made a example that is working, the only difference is that he dont use DefineMap.extend
maybe he can explain why my example is not working
Frank Lemanschik
@frank-dspeed
Nov 17 2017 10:55
hmmmm
show me his example maybe i find the diffrence
muss jetzt noch ein paar sachen erledigen, lass uns dann heute abend reden wenn du was gefunden hast
Frank Lemanschik
@frank-dspeed
Nov 17 2017 10:58
ja wird spannend mich wundert auch das sein example geht das muss am can.all liegen
Julian
@pYr0x
Nov 17 2017 11:00
the example is working on my local tests with stealjs and module imports
Frank Lemanschik
@frank-dspeed
Nov 17 2017 11:00
your example is working local?
or his example is working also local
alexey1986
@alexey1986
Nov 17 2017 11:11
@phillipskevin thanks
Julian
@pYr0x
Nov 17 2017 11:56
it is working local too
Frank Lemanschik
@frank-dspeed
Nov 17 2017 11:56
what is it
it is his or your
the main diffrence i see till now is that your using define list also
and that he maps the values
i tryed his example with extend it worked also
Julian
@pYr0x
Nov 17 2017 15:56
@phillipskevin @frank-dspeed the example works with <input> but not with contenteditable http://jsbin.com/zuxececoce/1/edit?js,console,output
Chasen Le Hara
@chasenlehara
Nov 17 2017 16:36
Hey @pYr0x, Kevin’s out today but I’m looking over your example.
Seems reasonable that innerHTML:bind should work; thanks for filing canjs/can-stache-bindings#356
Frank Lemanschik
@frank-dspeed
Nov 17 2017 20:58
@chasenlehara i think this innerHTML is a big anti pattern
normal you can define inner html by simply setting {{myVal}}
inside the tag
but i am wondering innerText also don't works
Brad Momberger
@bmomberger-bitovi
Nov 17 2017 21:03
It doesn't work because innerHTML is the only property binding that we turn into a listener for "change" events.
After the same topic came up last week I added this issue and would appreciate your +1s on it. canjs/can-stache-bindings#343
Justin Meyer
@justinbmeyer
Nov 17 2017 21:16
class Add {
    constructor() {
        this.count = 0;
    }
    add(){
        this.count++;
    }
}

Component.extend({
    tag: "observe-add",
    view: stache("<button on:click='add()'>+1</button><span>{{count}}</span>"),
    ViewModel: observe(Add)
});
works now
Frank Lemanschik
@frank-dspeed
Nov 17 2017 21:17
@bmomberger-bitovi should not get anything inside a contentedit able get then change events?
Brad Momberger
@bmomberger-bitovi
Nov 17 2017 21:18
you can bind on:change="" manually if you'd like.
Frank Lemanschik
@frank-dspeed
Nov 17 2017 21:18
good idea that could fix it
Brad Momberger
@bmomberger-bitovi
Nov 17 2017 21:18
The thing about innerHTML:bind="" is that it does the change binding for you. But we don't currently do that for other properties
Frank Lemanschik
@frank-dspeed
Nov 17 2017 21:18
now i understand why kevin example works :D
and pyrox not
kevin examples is using each keys, key = value
that create extra computes
and so extra change values
awsome how complex this all got here
:)
i hope soon we get general binding tools that are less feature rich and general propose then we all will understand
and be able to debug our own code
:)
Julian
@pYr0x
Nov 17 2017 21:35
@bmomberger-bitovi the issue you created it that a part of my problem?
or is that a other problem with e.g. innerText
@bmomberger-bitovi do you know why the innerHTML binding is not woking?
Brad Momberger
@bmomberger-bitovi
Nov 17 2017 21:37
Looking at it right now. Give me a few minutes to track down the problem.
Julian
@pYr0x
Nov 17 2017 21:38
ok... thank you very much.... i am curious what the problem can be... :)
because kevins example work.. but it's a bit different
Frank Lemanschik
@frank-dspeed
Nov 17 2017 21:40
@pYr0x i am sure its the each keys, key = value binding
that references the computes in a other way
and thats how it gets his update events
Julian
@pYr0x
Nov 17 2017 21:41
hmm
Frank Lemanschik
@frank-dspeed
Nov 17 2017 21:42
i tryed it with diffrent scopes also
like {{#myList}}
all that don't worked
for him and for you
i also have flattned kevins example from val.foo val.bar to foo and bar and it still works
the only thing that makes it working is the each syntax
i am pritty sure
Julian
@pYr0x
Nov 17 2017 21:54
maybe kevin created a luckshot
:)
Frank Lemanschik
@frank-dspeed
Nov 17 2017 21:54
ya something like that but i am sure that he somehow knowed what he did
as he also did something interristing
he created a array to reference the key value pairs
he could use them normal directly
i am sure he did that to reference them in the right way
else this extra step would not be needed and i don't saw that in any example befor
as stache normal supplys you with methods like {{#val}} {{foo}} - {{bar}} {{/val}}
he knowed exactly what he did else he would use such a short form
;)
Justin Meyer
@justinbmeyer
Nov 17 2017 22:22
@pYr0x we likely need an innerText attribute in can-util/dom/attr
I didn't read through the exact issue ... but these sorts of bindings should be done as custom attributes
@justinbmeyer this works
@justinbmeyer this not
thats the issue
the first example is from kevin and is working you can edit the content the var gets reflected
the secund is from @pYr0x its not reflecting the var change
both are using innerHTML bindings but the diffrence is that julian uses a node list + a other each statment the fact with extend and directly use define map does not make a diffrence
the interristing here is that kevins example works :) and i say its because of the each statment with the keys, key = value definition that creates a additional computed value
Brad Momberger
@bmomberger-bitovi
Nov 17 2017 22:31
Dudes, this is mindblowing.
If you include jQuery, the innerHTML binding stops working.
Frank Lemanschik
@frank-dspeed
Nov 17 2017 22:32
oh good finding @bmomberger-bitovi
respect this is a hard to get one
what jquery version did you test?
3.3.7?
Brad Momberger
@bmomberger-bitovi
Nov 17 2017 22:32
I couldn't figure out why Chasen's example with no {{#each}} didn't work.
But it was because it was including and not using jQuery. @frank-dspeed it was v3.1.0
Frank Lemanschik
@frank-dspeed
Nov 17 2017 22:33
ya good to know that means that jquery applys bindings to inner html?
without reason?
i can't imagin how jquery brakes that
Brad Momberger
@bmomberger-bitovi
Nov 17 2017 22:33
I am guessing so but I haven't investigated deeply enough. I just discovered this.
Frank Lemanschik
@frank-dspeed
Nov 17 2017 22:33
when not used
hmmm ya but still good finding ;)
who knows what else not works with jquery and works without
Brad Momberger
@bmomberger-bitovi
Nov 17 2017 22:34
yeah, this is kind of major b/c lots of our users still use jQuery for things.
Frank Lemanschik
@frank-dspeed
Nov 17 2017 22:34
and who knows who don't uses jquery
as bootstrap is using it
ya any one uses it
its like a must have
there are millions of jquery plugins around it has the largest eco system for dom stuff that you can think of
Brad Momberger
@bmomberger-bitovi
Nov 17 2017 22:36
BTW, @pYr0x your example in the Github issue also starts working when you remove jQuery
Frank Lemanschik
@frank-dspeed
Nov 17 2017 22:36
this is amazing :)
then we have 2 issues
make livebindings work with jquery
and add innerText on change event
so you can bind also innerText
Brad Momberger
@bmomberger-bitovi
Nov 17 2017 22:36
Yes. Now we know those are separate.
Frank Lemanschik
@frank-dspeed
Nov 17 2017 22:36
what would be logical if
but i am happy that it is this way around because if it would be like i tought with the computed value generated with the each statment
that would be a complex thing
:D
now its simply incompatible some how with the most wide used javascript frontend lib :)
Brad Momberger
@bmomberger-bitovi
Nov 17 2017 22:40
are you implying that jQuery is replacing the contenteditable?
I guess that's possible
Frank Lemanschik
@frank-dspeed
Nov 17 2017 22:41
yes
something like that is what i am proposing :)
@bmomberger-bitovi !! lets load all mighty can-jquery
that allows cross binding jquery and dom events
and voila
:D
its logical that this is a situation for that
Extensions to the event system so that can events and jQuery events are cross-bound.
this way jquery will not swallow the contentchange events
Brad Momberger
@bmomberger-bitovi
Nov 17 2017 22:46
It looks like that is correct.
Frank Lemanschik
@frank-dspeed
Nov 17 2017 22:47
happy to help :)
good that i studied all the packages over time
Brad Momberger
@bmomberger-bitovi
Nov 17 2017 22:56
No, that turns out to not be correct.
Importing can-jquery still breaks the binding
Frank Lemanschik
@frank-dspeed
Nov 17 2017 22:56
then we are doomed
:)
working around jquery sounds like a not so nice tasks
Brad Momberger
@bmomberger-bitovi
Nov 17 2017 22:57
Well we could, you know, fix it.
Frank Lemanschik
@frank-dspeed
Nov 17 2017 22:58
i think its not our fault
we would need to rename propertys and mirror that
also detect jquery is loaded or not or general do it
i am for general doing that but this doubles the amount of data only for the workaround of jquery
we would shadow the innerHTML into something else
so jquery don't touches it
how else will you prevent jquery from modifying it as it will simply parse the html
Frank Lemanschik
@frank-dspeed
Nov 17 2017 23:03
I have it
!!!
Loading Jquery after can all fixes the problem
@bmomberger-bitovi
i was examing the query lib
Brad Momberger
@bmomberger-bitovi
Nov 17 2017 23:04
I think I might know why that is...
Frank Lemanschik
@frank-dspeed
Nov 17 2017 23:04
and was thinking what it could do
ah so you found it out your self
:D
Brad Momberger
@bmomberger-bitovi
Nov 17 2017 23:05
no, but you're making me think that is has something to do with can.all putting a zone on the addEventListener
Frank Lemanschik
@frank-dspeed
Nov 17 2017 23:06
yes something like that
jquery adds some listners for events
that brake then our way of event hijacking
so if we init first we get what we need
without getting affected by the jquery changes and hooks
i am not a fan of can-zone
it costed me half a year to find out why projects using socket.io don't render
and that it is zone socket.io related :)
Frank Lemanschik
@frank-dspeed
Nov 17 2017 23:15
@bmomberger-bitovi about Solutions now i would tag that as won't fix and simply say load order matters as it always does for jquery users and its plugins so pointing out that when using jquery loading canjs befor that is right and DoneJS automatic fixes that via steal and its zone dependency in the mapping so it loads always befor any requered or included jquery
Ivo Pinheiro
@ivospinheiro
Nov 17 2017 23:49
Hi guys,
Can you clarify me what we have in this page:
https://canjs.com/doc/can-set.props.id.html
In particular the statement:
"If there are multiple ids, a JSON.stringify-ed JSON object is returned with each id value is returned."

To define multiple Id properties should we configure algebra like this?

var algebra2 = new set.Algebra(
  set.props.id("studentId"),
  set.props.id("classId")
);

or like this?

var algebra2 = new set.Algebra(
  set.props.id(["studentId","classId" ])
);
according what I have tested with the first code only the last property is used as Id property
I've tried to find some tests on can-set project but I didn't find any for this scenario (multiple Id properties)