These are chat archives for canjs/canjs

3rd
Feb 2017
l1169117
@l1169117
Feb 03 2017 00:14
Yes, we are looking at some workarounds and will submit an issue if they don't get the job done
Gira Minus
@gKreator
Feb 03 2017 00:20
@phillipskevin My main man.. I know im doing this wrong: http://forums.donejs.com/t/listen-when-map-property-is-set/542/3
Kevin Phillips
@phillipskevin
Feb 03 2017 00:49
if you want to set the default value to an object, you have to make it value: function() { return {…} }
set value as a function that returns the object
Kevin Phillips
@phillipskevin
Feb 03 2017 00:54
I don’t think that object can be a PropDefinition like it can with Type
Sander Roeffaers
@Kleppo
Feb 03 2017 12:30

I get this warning: 'Uncaught TypeError: Cannot define property:style, object is not extensible.’
When I do this:

var ViewModel = DefineMap.extend({
    element : {
        type : '*'
    },
    setCss : function() {
        this.element.css({
            top     : '10px',
            left     : '10px'
        })
    }
}

Component.extend({
    tag         : 'test-component',
    view         : stache(’TEST’),
    ViewModel     : ViewModel,
    events         : {
        inserted : function(el) {
            this.viewModel.element = $(el);
            this.viewModel.setCss();
        }
    }
});

Unless I set ‘seal: false’ on my viewmodel..
Is there a way to fix this without the ‘seal’ solution?

Kevin Phillips
@phillipskevin
Feb 03 2017 14:54
@Kleppo you can add a style property to your DefineMap
var ViewModel = DefineMap.extend({
    style: ‘string’,
    element : ...,
    setCss : ...
}
Sander Roeffaers
@Kleppo
Feb 03 2017 14:57
That makes sense.. :-) Thx
Kevin Phillips
@phillipskevin
Feb 03 2017 14:58
no problem
it might be easier to accomplish what you’re doing just in your template though
so you wouldn’t have to use $.css

something like

var ViewModel = DefineMap.extend({
    css: {
        value() {
            return {
                top     : '10px',
                left     : '10px'
            }
        }
    }
}

and in your template

<div {$style}=“css”></div>
Nico R.
@nriesco
Feb 03 2017 20:10
@phillipskevin you say it is possible to use <div {$style}=“css”></div> is that something new in 3.x? what other options are available? any other html attribute? class? id?
Kevin Phillips
@phillipskevin
Feb 03 2017 20:11
you can do that with any attribute or property of the element
Nico R.
@nriesco
Feb 03 2017 20:11
even in can 2.x?
Kevin Phillips
@phillipskevin
Feb 03 2017 20:12
yes
Nico R.
@nriesco
Feb 03 2017 20:12
cool thanks
Kevin Phillips
@phillipskevin
Feb 03 2017 20:12
Adding $ to a binding like ($event)="key()" changes the binding from the viewModel to the element's attributes or properties.
Gira Minus
@gKreator
Feb 03 2017 20:41
@phillipskevin Thanks, but as always I run into the next issue :D http://forums.donejs.com/t/listen-when-map-property-is-set/542/7
Kevin Phillips
@phillipskevin
Feb 03 2017 20:47
let me know if my response answers your question
Gira Minus
@gKreator
Feb 03 2017 20:48
You are magic!
I feel stuff like this is kinda hard to get out of the documentation...
Kevin Phillips
@phillipskevin
Feb 03 2017 20:50
yeah, i hear you
if you have ideas for how we can improve the docs, let us know
or PRs are always welcome
Gira Minus
@gKreator
Feb 03 2017 20:53
Well I think my biggest issue was that I was just looking at the wrong thing in the docs... I was looking at http://canjs.com/doc/can-define.types.TypeConstructor.html not http://canjs.com/doc/can-define.types.propDefinition.html, and it was not 100% apparent to me
Kevin Phillips
@phillipskevin
Feb 03 2017 20:54
yeah, you’re kind of looking for the second signature of TypeConstructor
Gira Minus
@gKreator
Feb 03 2017 20:54
blob
I thought that was all to it
Kevin Phillips
@phillipskevin
Feb 03 2017 20:54
not sure what you mean
like those were the only options?
Gira Minus
@gKreator
Feb 03 2017 20:55
I thought everything about propDefinition was in that screenshot...
yeah
Kevin Phillips
@phillipskevin
Feb 03 2017 20:55
ah, ok
Gira Minus
@gKreator
Feb 03 2017 20:55
I didn't sleep allot the other night so that might of been it lol
Kevin Phillips
@phillipskevin
Feb 03 2017 20:56
maybe lol
but we could show options other than setting the types
Gira Minus
@gKreator
Feb 03 2017 20:57
that or maybe even just make the link a bit more clear... like have a button under it saying to read the full spec of propDefininition look here
Kevin Phillips
@phillipskevin
Feb 03 2017 20:58
yeah, there’s just so many links to other docs
Gira Minus
@gKreator
Feb 03 2017 21:02
anyway... I did start on writing a new tutorial for Canjs/Donejs from a beginners perspective, I am stripping down the bitballs example and just showcasing the common features that you will use in creating any app. I will draw some fancy circles to explain how 2 way binding works as well as can-import and define map. Hopefully I will have that done in a week or so. I want to get a few of my friends into CanJs but for beginners it seems to be very hard to understand how everything relates.
Kevin Phillips
@phillipskevin
Feb 03 2017 21:03
:thumbsup: that’s great
Gira Minus
@gKreator
Feb 03 2017 21:44
I do have a question on bitballs tho... how exactly does the viewModel from app.js get bound to the route? Is it just because it is imported via stache? https://github.com/donejs/bitballs/blob/master/public/index.stache
Kevin Phillips
@phillipskevin
Feb 03 2017 21:47
done-autorender sets it up
Matthew Phillips
@matthewp
Feb 03 2017 21:47
done-autorender calls can.route.map(vm)
Gira Minus
@gKreator
Feb 03 2017 21:48
that gets initiated because of this line: <can-import from="bitballs/app" export-as="viewModel" /> corect?
Matthew Phillips
@matthewp
Feb 03 2017 21:48
yep
exactly
Gira Minus
@gKreator
Feb 03 2017 21:49
ok so in theory if I included 2 viewModels... both would be bound to the route?
and if they have conflicting properties what would happen?
Kevin Phillips
@phillipskevin
Feb 03 2017 21:50
I don’t know that anyone’s tried including 2 viewModels, but they wouldn’t both be used
can-route can only have one map
Gira Minus
@gKreator
Feb 03 2017 21:51
ok yeah makes sense
Matthew Phillips
@matthewp
Feb 03 2017 22:06
it won't end well :)
probably it would just pick the second one
Gira Minus
@gKreator
Feb 03 2017 22:06
:D
gotta ask I didnt even feel like trying it nor would I ever think to do it lol
Is a DefineMap getter technically a compute since it listens for changes of the used properties?
Matthew Phillips
@matthewp
Feb 03 2017 22:12
I don't think they use can-compute, but use can-observation which is like the ugly guts of can-compute
so, yeah, pretty much
If you have a project without an IE requirement check out https://github.com/canjs/can-observe
Chasen Le Hara
@chasenlehara
Feb 03 2017 23:20
@gKreator, that’s awesome that you’re writing a post about CanJS/DoneJS
Like Kevin said, if you have any specific suggestions for improving our docs, we’re all ears… and accepting contributions :P
It can be intimidating to publish technical material, so if you want someone from the core team to give feedback before you publish, feel free to ask.
I’d be happy to help review it for technical accuracy and I’m sure others would too. :)