These are chat archives for canjs/canjs

6th
Apr 2016
Dovid Bleier
@dbleier
Apr 06 2016 17:33
how does one two-way bind to a checkbox? I tried <input type="checkbox" {(myprop)}="this.value" /> but it didn't work
Julian
@pYr0x
Apr 06 2016 17:36
i think for checkboxes use can-value
also for radio buttons
Dovid Bleier
@dbleier
Apr 06 2016 17:37
ok, I thought can-value is deprecated
Julian
@pYr0x
Apr 06 2016 17:37
yes
Kevin Phillips
@phillipskevin
Apr 06 2016 17:37
it is, but there isn’t a good way to do it with the new binding syntax
Julian
@pYr0x
Apr 06 2016 17:37
but for checkboxes and radiobuttons the new syntax is not working correctly
Kevin Phillips
@phillipskevin
Apr 06 2016 17:37
there’s some history here: canjs/canjs#2167
Dovid Bleier
@dbleier
Apr 06 2016 17:37
ok, good to know, thanks
Kevin Phillips
@phillipskevin
Apr 06 2016 17:37
there’s also an issue to improve the docs: canjs/canjs#2210
Julian
@pYr0x
Apr 06 2016 17:39
;)
we should document that... really...
Dovid Bleier
@dbleier
Apr 06 2016 17:51
also I don't see in the docs where {{#eq ... }} is documented. Is there an inverse function #ne or something like that?
Julian
@pYr0x
Apr 06 2016 17:54
is there a eq helper?
i know an ishelper
Christopher Oliphant
@RALifeCoach
Apr 06 2016 17:55
is and eq are the same
@dbleier #ne is {{^eq …}}
Kevin Phillips
@phillipskevin
Apr 06 2016 17:56
I think {{#unless}} is what you want
oh, no, it’s not
Julian
@pYr0x
Apr 06 2016 17:57
;)
Kevin Phillips
@phillipskevin
Apr 06 2016 17:59
I should wait 30 mins after lunch before typing
Julian
@pYr0x
Apr 06 2016 17:59
:D
Justin Meyer
@justinbmeyer
Apr 06 2016 18:09
@pYr0x new syntax works correctly for checkboxes
It works differently
Julian
@pYr0x
Apr 06 2016 18:11
works not correctly might be the wrong wording..
but is works different and this is not documented
dylanrtt
@dylanrtt
Apr 06 2016 18:12
is the new syntax documented to be the same as can-value?
Julian
@pYr0x
Apr 06 2016 18:12
or is not clear for users.. also this "deprecated" info is confusing for people
Use two way binding like {($value)}="KEY" instead.
dylanrtt
@dylanrtt
Apr 06 2016 18:16
#2299 should resolve the cases for radio buttons and the like
Julian
@pYr0x
Apr 06 2016 18:17
?
sorry don't understand
Dovid Bleier
@dbleier
Apr 06 2016 18:40
@RALifeCoach @pYr0x thanks for the answer on eq, but it seems not to be in the docs
Julian
@pYr0x
Apr 06 2016 18:40
yes
Dovid Bleier
@dbleier
Apr 06 2016 18:41
@justinbmeyer what is the proper syntax to use to two-way bind checkboxes and radios if not can-value?
dylanrtt
@dylanrtt
Apr 06 2016 18:47
@dbleier use {($checked)} for checkboxes
Dovid Bleier
@dbleier
Apr 06 2016 18:47
ok, will try that
dylanrtt
@dylanrtt
Apr 06 2016 18:47
@pYr0x the new syntax is designed to be a simpler interface. The binding is between an element property and the scope whereas can-value is complicated and has multiple cases depending on element type
for example with checkboxes, you don't actually want to change the value property, you want to change the checked property
so yes, the docs are misleading because {($value)} isn't an exact replacement for can-value
Dovid Bleier
@dbleier
Apr 06 2016 18:51
{($checked)} worked!
dylanrtt
@dylanrtt
Apr 06 2016 18:52
@pYr0x in the case of radio buttons, the issue I linked should allow for get/set converters so if you use something like {($checked)}="radio(~prop)", when prop changes, the converter can decide whether the radio button should be checked
Julian
@pYr0x
Apr 06 2016 18:53
for sideeffects
we change the passed compute
ok... but this is also not documented
:(
Dovid Bleier
@dbleier
Apr 06 2016 18:55
@dylanrtt what does the ~ do?
dylanrtt
@dylanrtt
Apr 06 2016 18:55
@dbleier wraps the property in a compute
Julian
@pYr0x
Apr 06 2016 18:55
pass a compute
dylanrtt
@dylanrtt
Apr 06 2016 18:56
it was part of the 2.3 spec and made especially for passing computes to helpers in expressions since the default for expressions is to pass by value
Dovid Bleier
@dbleier
Apr 06 2016 18:57
I also have radio buttons, so in your example radio(~prop) would return the prop's value to set the radio button?
dylanrtt
@dylanrtt
Apr 06 2016 18:57
just use can-value for radio buttons for now
Dovid Bleier
@dbleier
Apr 06 2016 18:59
ok
Julian
@pYr0x
Apr 06 2016 19:00
@dylanrtt can you give me an example
This message was deleted
Dovid Bleier
@dbleier
Apr 06 2016 19:05
{($value)} also works for <select>?
Julian
@pYr0x
Apr 06 2016 19:05
as we said... please use can-value
Dovid Bleier
@dbleier
Apr 06 2016 19:06
I thought @dylanrtt meant just for radio
dylanrtt
@dylanrtt
Apr 06 2016 19:07
it works for selects but I think that is also a deviation from the ideal simplicity
Gregg Roemhildt
@roemhildtg
Apr 06 2016 19:09
Hello, is can.extend just for objects? Or can it be used on can.Map to combine 2 maps?
dylanrtt
@dylanrtt
Apr 06 2016 19:09
@roemhildtg just objects. If you want to combine maps, attr() or serialize() them into objects first
@pYr0x I'm not totally sure how it would work for radio buttons to be honest
Gregg Roemhildt
@roemhildtg
Apr 06 2016 19:10
Okay cool. Good suggestions.
dylanrtt
@dylanrtt
Apr 06 2016 19:10
@pYr0x but Justin did suggest converters as a solution for them
Julian
@pYr0x
Apr 06 2016 19:11
i tried that , but it didnt work
dylanrtt
@dylanrtt
Apr 06 2016 19:23
the problem with radio buttons is that in order to set the compute, you need access to both the checked and value properties but you only get the one that is specified in the binding
not sure what he had in mind
Julian
@pYr0x
Apr 06 2016 19:24
so the new binding syntax is not for select, radio and checkboxes
dylanrtt
@dylanrtt
Apr 06 2016 19:25
not the way that can-value is used, no, though it currently works for select. Technically, the new syntax is for everything, but {($value)} isn't
Dovid Bleier
@dbleier
Apr 06 2016 20:38
next question, I retrieve a json document from the server with all the data for the app. Now I want to distribute sections of that document to sub-components which will manage that section and update the master document since all server/db interaction happens at the macro (full document) level.
from my reading it seems I would do this via template/scope variables and referencing
<doc-comp {^doc}="*doc" />
<sub-comp-1 {prop}="*doc.subsection1" />
<sub-comp-2 {prop}="*doc.subsection2" />
this will pass around a reference to the sub-sections in the doc or it will copy the value? Meaning when the subcomponent updates its section, the master document will be updated?
Dovid Bleier
@dbleier
Apr 06 2016 20:45
also how would I bubble up a change event? Anytime part of the document is updated I want to set a flag on doc component to create a visual cue to the user that the document is dirty and needs to be saved
dylanrtt
@dylanrtt
Apr 06 2016 20:45
as long as the subsections are objects, it will pass a reference
you could use the events object in the doc component to observe changes to subsections to set a flag which the view can observe
Dovid Bleier
@dbleier
Apr 06 2016 20:46
ok, is this the best way to go?
dylanrtt
@dylanrtt
Apr 06 2016 20:47
there are usually a few ways, and the best isn't always clear
Dovid Bleier
@dbleier
Apr 06 2016 20:53
what would be an alternative?
dylanrtt
@dylanrtt
Apr 06 2016 20:56
to which part? the change propagation? If you are binding form controls directly into the subsections, then the events object is probably the simplest
you could create another component whose sole purpose is to observe the doc
Dovid Bleier
@dbleier
Apr 06 2016 21:01
actually I meant the distribution of sub objects in the json doc to the sub components
dylanrtt
@dylanrtt
Apr 06 2016 21:09
what you are doing seems like the best way
but ultimately that will depend on what you need to do with it
another way would be to create a module that the sub components import to access the document
Dovid Bleier
@dbleier
Apr 06 2016 21:20
I did that in another project. That seems to be the cleaner way to do things than passing everything through the templates. What is the advantage of passing variables via the template instead of just importing in js?
dylanrtt
@dylanrtt
Apr 06 2016 21:21
the components don't have to be as aware of the project if they are only passed what they need to function
simpler to test because you don't need DI
and you can look at the template to indicate where data is flowing
Dovid Bleier
@dbleier
Apr 06 2016 21:25
interesting. Also another issue I thought of is that superModel uses fall-through-cache and an issue I have been struggling with on another app is sending the new data from the server into the VM, since the promise already resolved with the cached data. But the template is updated, so I wonder if template variables would help to push the updated server data to the VM.
dylanrtt
@dylanrtt
Apr 06 2016 21:31
is that because you are processing the data before sending it to the VM which breaks the reference to the original data that will be updated in the background?
if fall-through-cache is a problem for some connections, you can always make a connection type that doesn't use it
Dovid Bleier
@dbleier
Apr 06 2016 21:34
no, I process after sending to vm, but it only sends the cached data to vm, not the updates from the server
Christopher Oliphant
@RALifeCoach
Apr 06 2016 21:34
I am stuck. I am adding a component to the page and the component is being created, but it isn’t instantiating the Map I have assigned to the viewModel. I have done this before and it worked in the other project, but I cannot get it to work in this one.
Can anyone throw out ideas about what I might have done wrong.
Dovid Bleier
@dbleier
Apr 06 2016 21:35
in theory I like fall-through-cache, as I would like to show cached data and then update when I get new server data
Christopher Oliphant
@RALifeCoach
Apr 06 2016 21:35
I know the Map have been defined as:
Dovid Bleier
@dbleier
Apr 06 2016 21:36
in reality, stache doesn't render until it gets the new server data, which is not so bad except I have some non-template related processes that need to run in the VM and haven't been able to get that data as of yet
Christopher Oliphant
@RALifeCoach
Apr 06 2016 21:36
window.ns.MyMap = can.Map.extend({
define: {
…
},
someMethod: function () { … }
});
dylanrtt
@dylanrtt
Apr 06 2016 21:37
@dbleier I think the data update is silent. You might have to make a custom behavior that will notify you in some way such as an additional promise or event
Christopher Oliphant
@RALifeCoach
Apr 06 2016 21:38
then the component:
can.Component.extend({
tag: ‘xxx’,
template: can.view(‘path to stache file’),
events: { … },
viewModel: window.ns.MyMap
});
Kevin Phillips
@phillipskevin
Apr 06 2016 21:38
@RALifeCoach so if you add an init function on the Map it doesn’t get called?
Christopher Oliphant
@RALifeCoach
Apr 06 2016 21:39
No it doesn’t.
I tried setup and init
Kevin Phillips
@phillipskevin
Apr 06 2016 21:39
how are you adding the component to the page?
Christopher Oliphant
@RALifeCoach
Apr 06 2016 21:40
            var stache = can.stache(‘<xxx id="' + id + '" {parent}="parent"></xxx>');
            this.$container.append(stache({
                parent: this
            }));
dylanrtt
@dylanrtt
Apr 06 2016 21:41
@RALifeCoach perhaps the component is registered before the map is defined
if you breakpoint the can.Component.extend, can you see that window.ns.MyMap is what you expect?
Dovid Bleier
@dbleier
Apr 06 2016 21:42
@dylanrtt I was thinking that, but since superMap doesn't take custom behaviors, I'd have to scrap it and create my own connection
Christopher Oliphant
@RALifeCoach
Apr 06 2016 21:43
I added a console.log(‘map’) in the file just before the map was defined and a console.log(‘component’) just before the component was registered. They are in the right order.
dylanrtt
@dylanrtt
Apr 06 2016 21:44
maybe the problem is the tag has no hypen
Christopher Oliphant
@RALifeCoach
Apr 06 2016 21:45
@dylanrtt my actual tag is drawer-modal
I set a break point on the can.Component.extend and checked that window.ns.MyMap is defined and is what I want it to be.
I am an idiot.
A typo that I have been starring at for the last couple of hours
viewModal instead of viewModel
dylanrtt
@dylanrtt
Apr 06 2016 21:50
@dbleier connections are pretty simple to make. you can just copy superMap and tweak it
Christopher Oliphant
@RALifeCoach
Apr 06 2016 21:51
Thanks for the assistance. Sometimes explaining the error is all it takes. I appreciate the ears to listen and make intelligent suggestions.