These are chat archives for canjs/canjs

25th
Apr 2017
Gira Minus
@gKreator
Apr 25 2017 00:01
blob
removeEventListener does not work, guessing it has something to do with the handlers
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 00:02
You're saying that the events stay bound to the window after resize_stop is called?
Gira Minus
@gKreator
Apr 25 2017 00:03
yes
very strange, didnt run into this in canjs2
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 00:10
The usual first place I'd run to to debug this is to determine if the resize_one that got bound to window was the same function as the one you're trying to remove.
(I know, intuitively it looks like just the same object but if you re-created the control for the component, it could possibly create new copies of those functions)
Gira Minus
@gKreator
Apr 25 2017 00:11
im guessing its copies
let me check
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 00:11
caching it on the window on resize_start and === checking them on resize_stop should be sufficient
Gira Minus
@gKreator
Apr 25 2017 00:14
blob
returns undefined
Kevin Phillips
@phillipskevin
Apr 25 2017 00:15
try window.addEventListener(‘mouseup’, this.resize_stop.bind(this), false)
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 00:15
hm. Now that I can see part of the line at the bottom of the screenshot, you're doing this on the viewModel and not the component's events object.
Gira Minus
@gKreator
Apr 25 2017 00:16
yup
i guess i could just switch it to the events
but i wanted to be able to destroy the move event
Kevin Phillips
@phillipskevin
Apr 25 2017 00:18
this in resize_stop is the window, right?
Gira Minus
@gKreator
Apr 25 2017 00:19
i think it would become the window yeah
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 00:20
oh.
Kevin Phillips
@phillipskevin
Apr 25 2017 00:20
so just do the .bind() thing I mentioned above
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 00:20
How are you calling or binding resize_start?
Gira Minus
@gKreator
Apr 25 2017 00:20
($click) in stache
Kevin Phillips
@phillipskevin
Apr 25 2017 00:21
window.addEventListener(‘mouseup’, this.resize_stop.bind(this), false)
Gira Minus
@gKreator
Apr 25 2017 00:21
tried the bind thing
blob
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 00:21
The problem with the bind thing is you're making a new function that isn't then referenced anywhere.
Gira Minus
@gKreator
Apr 25 2017 00:21
returns correct now, but it still does remove
not*
Kevin Phillips
@phillipskevin
Apr 25 2017 00:21
yeah, that makes sense @bmomberger-bitovi
Gira Minus
@gKreator
Apr 25 2017 00:22
so long story short just use the events part of the component instead?
Kevin Phillips
@phillipskevin
Apr 25 2017 00:23
resize_start: function() {
  var vm = this;
  window.addEventListener('mouseup', function() {
    vm.resize_stop();
  }, false);
}
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 00:24
You said you were binding resize_start on ($click), which implies mouseup has happened. I'm guessing from everything so far that you want to bind that on ($mousedown)?
Gira Minus
@gKreator
Apr 25 2017 00:24
ohh sorry
imeant ($mousedown)
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 00:24
ok
Gira Minus
@gKreator
Apr 25 2017 00:26
Kevin, technically resize_stop does not have the vm object and therefore it does the same thing as before
Kevin Phillips
@phillipskevin
Apr 25 2017 00:28
the vm would be this inside resize_stop
if you call it like vm.resize_stop()
Gira Minus
@gKreator
Apr 25 2017 00:30
doesnt work
Kevin Phillips
@phillipskevin
Apr 25 2017 00:31
what doesn't work?
Gira Minus
@gKreator
Apr 25 2017 00:31
removeEventListener
window.removeEventListener('mouseup', this.resize_stop, false);
Kevin Phillips
@phillipskevin
Apr 25 2017 00:32
yeah, shoot, I don't know why I thought that would work...
Gira Minus
@gKreator
Apr 25 2017 00:32
yeah
Kevin Phillips
@phillipskevin
Apr 25 2017 00:32
since you're adding an anonymous function
Gira Minus
@gKreator
Apr 25 2017 00:32
we created a secpmd handler
yeah
second*
resize_start: function() {
var resize_stop = function( event ){
console.log( this.resize_one );
window.removeEventListener('mousemove', resize_stop, false);
};
window.addEventListener('mouseup', resize_stop, false);
},
ima cheat with this lol
:/
blob
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 00:35
Maybe the best course is somewhere in the middle. I.e.
Gira Minus
@gKreator
Apr 25 2017 00:35
a raptor isnt going to come out of my screen for that one right?
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 00:38
var ViewModel = DefineMap.extend({
   resize_cb: "*",
  resize_start: function() { 
      this.resize_cb = function() { ... }; 
      window.addEventListener('mousemove', this.resize_cb); 
   }
});

can.Component.extend({ ...
  events: {
    "{window} mouseup": { 
        if(this.viewModel.resize_cb) { 
            window.removeEventListener('mousemove', this.resize_cb); 
        }
     }
  }
})
So here you have a window listener on the component events, which is fine because you can't put the binding in your stache template anyway. The element is still set up for ($mousedown)="resize_start"
And everything in-scope for the component is in the viewmodel.
Gira Minus
@gKreator
Apr 25 2017 00:43
yeah i guess that would work
well thanks guys for the help i have enough to go on for now
tescalle
@tescalle
Apr 25 2017 13:40
Hi, we are trying to migrate from canJS 2.3.28 to CansJS 3.5.1 and we have some problems. Our application is based on dojo 1.9.0 framework, and we did not find any information about "how to load canJs modules with AMD/Dojo". Can you please provide us some help?
Gregg Roemhildt
@roemhildtg
Apr 25 2017 13:51
@tescalle I too am using dojo/amd. There was discussion about this, I think the devs can provide more info but basically, canjs/can will provide a export script to build to amd which can then be used in a requirejs/dojo app. But there was stealjs/steal-tools#582 that prevented this, which has since been closed so perhaps its time to try again
tescalle
@tescalle
Apr 25 2017 14:02
@roemhildtg thx for your reply, do you know where we can find the export script to build to amd ? we just did "npm install canjs" with 3.5.1 version and we did not find any build script.
Gregg Roemhildt
@roemhildtg
Apr 25 2017 14:09
I posted the one I was using in that issue linked
tescalle
@tescalle
Apr 25 2017 14:10
@roemhildtg Thx, we are going to try it
Gira Minus
@gKreator
Apr 25 2017 14:28
Y not stealjs?
Gregg Roemhildt
@roemhildtg
Apr 25 2017 14:29
Dojo plugins like i18n and sniff don't work
I would love to use steal, the dojo bundler is really tricky
The plugin syntax is different too. for example, in dojo/requirejs its like 'pluginName!./path/to/module'
Gira Minus
@gKreator
Apr 25 2017 14:47
Yeah when i went from canjs2, i switched from requirejs. Best decision ever steal is amazing
Nico R.
@nriesco
Apr 25 2017 15:19
hi, I’ve seen something like this: <my-component {(child-prop)}=“../“/> what is the correct syntax to bind an element with the “parent”? another question: https://canjs.com/doc/can-stache-bindings.html => what is the difference of using $ (child-prop v/s child-attr)
Gira Minus
@gKreator
Apr 25 2017 15:22
Cash sign means event
Kevin Phillips
@phillipskevin
Apr 25 2017 15:27
$ means it’s a DOM event
"attribute or property"
Kevin Phillips
@phillipskevin
Apr 25 2017 15:30
sorry.. $ means it’s a DOM event or DOM attribute/property
so {$value} sets the value attribute on the element
{value} sets the value property on the viewModel
Nico R.
@nriesco
Apr 25 2017 15:31
oh I see, that is great actually… the docs don’t say anything about dom, it could be good to mention it
Kevin Phillips
@phillipskevin
Apr 25 2017 15:32
PRs are welcome :smile:
Nico R.
@nriesco
Apr 25 2017 15:32
sure, but where exactly? donejs/donejs? a special branch for docs?
gh-pages?
and what about the parent scope? <my-component {(child-prop)}="../"/>
you want to pass the current scope into my-component?
or do you actually want the parent scope?
Nico R.
@nriesco
Apr 25 2017 15:39
Both
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 15:40
Parent scope can be had in a binding with %scope._parent
Kevin Phillips
@phillipskevin
Apr 25 2017 15:42
that’s not a public API, right @bmomberger-bitovi ?
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 15:43
Correct. We don't have a public method for returning a scope's parent scope.
However, all of the special % references are documented and public.
So %scope itself is public API.
Kevin Phillips
@phillipskevin
Apr 25 2017 15:45
right
so in this case… you can use <my-component {(child-prop)}="."/>or <my-component {(child-prop)}=“this"/> to set childProp on <my-component>’s viewModel to the current scope
or you could use %scope, but I don’t think it has much benefit here
for passing the parent scope… you probably want to pass it explicitly through bindings, instead of trying to use ../whatever to retrieve it
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 15:48
Just to clarify, . is current context (the top of the scope stack), equivalent to %context in can-stache-bindings
.. is parent context. It doesn't let you do scope reads through the stack when passing those. But the question is whether you need to do scope reads through the entire stack in your component. We would strongly discourage that in favor of explicitly passing which elements from the scope are necessary.
morrme
@morrme
Apr 25 2017 16:31
:wave: hi everyone! i was about to submit a little PR and wanted to check contributing.md first. it is rendering a little weird in the 2 browsers i have viewed it in....can anyone check it out and confirm?
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 16:35
You're right, it looks like contributing.md hasn't kept up with changes in the source tree. All guides are now under docs/can-guides... the youtube iframe not rendering, though, I don't know about.
morrme
@morrme
Apr 25 2017 16:35
thanksk @bmomberger-bitovi !
Nico R.
@nriesco
Apr 25 2017 17:02
what about bindings and functions? can I execute a child’s function from the parent?
but I need to execute it not in the stache by pressing a button, I need it to be in the viewmodel definition so I can do some complex logic
maybe the question would be how can I access something that was included in the stache
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 17:04
Passing the function as a function requires an @ prefix in the binding. It looks like this:
<my-component  {name-of-function-in-component}="@scope.reference.to.function" />
Nico R.
@nriesco
Apr 25 2017 17:04
ok
and the opposite? accessing the child’s function from its parent?
that would be the solution to my problem :-)
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 17:09
you can use a child-to-parent binding the same way, just move the @ to the other side
<foo-bar {^@foo}="myFunc"/>
(I had to go to JSBin quickly and check that I was doing it right)
Nico R.
@nriesco
Apr 25 2017 17:10
thanks I’ll give it a try!
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 17:15
The one other consideration is, if you're using DefineMaps for your view models, function properties are best defined as { type: "*" }, possibly with a comment to note that they're functions.
(the default "observable" also works because it depends on isPlainObject to know whether to convert a value to a DefineMap, and functions fail that test, but I prefer clarity)
Nico R.
@nriesco
Apr 25 2017 17:36
@bmomberger-bitovi do you have that jsbin at hand? I’m having trouble making it work
Nico R.
@nriesco
Apr 25 2017 17:42
@bmomberger-bitovi will myFunc be available in the (parent) view model? this.myFunc()?
It should, but watch out for binding when you have subsections. That creates a new scope context which might receive the binding rather than your parent component.
If you need to be sure, you can try using use the reference scope to stash a reference to the VM
Eben
@eben-roux
Apr 25 2017 19:51
When I add a value to my DefineMap I get this error in the browser:
Uncaught TypeError: Cannot define property:value, object is not extensible.
is value something like a reserved word in the DefineMap or am I barking up the wrong tree
Kevin Phillips
@phillipskevin
Apr 25 2017 19:52
you need to define value in your DefineMap.extend({ … })
Eben
@eben-roux
Apr 25 2017 19:52
?
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 19:53
When you extend DefineMap to subclasses, the instances of those subclasses are sealed by default.
Kevin Phillips
@phillipskevin
Apr 25 2017 19:53
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 19:53
Meaning that you cannot add new properties after they've been instantiated.
Eben
@eben-roux
Apr 25 2017 19:53
I have this:
export const ViewModel = DefineMap.extend({
    value: { type: 'string', value: 'xyz' }
});
Kevin Phillips
@phillipskevin
Apr 25 2017 19:55
and you’re sure that’s the DefineMap it’s being set on?
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 19:55
Mmkay, and may we see your component definition as well?
Kevin Phillips
@phillipskevin
Apr 25 2017 19:55
if you’re passing value to a child component or something it would need to be defined there also
Eben
@eben-roux
Apr 25 2017 19:56

ok, trying ti simplify:

import Component from 'can-component';
import DefineMap from 'can-define/map/';
import view from './input.stache!';

export const ViewModel = DefineMap.extend({
    value: { type: 'string', value: 'xyz' }
});

export default Component.extend({
    tag: 'sentinel-input',
    view,
    viewModel: ViewModel,
    events: {
        'inserted': function(el) {
            if (this.viewModel.focus) {
                if (el[0] && el[0].childNodes[0] && el[0].childNodes[0].focus) {
                    el[0].childNodes[0].focus();
                }
            }
        }
    }
});

and the stache:

{{value}}
simply changing value to inputValue works fine.
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 19:58
You should use capital-V ViewModel as the key if you're passing in a class. That probably(?) doesn't matter, but it's possible to pass in a plain object prototype as well.
Kevin Phillips
@phillipskevin
Apr 25 2017 19:59
there must be something else happening in your app @eben-roux
doing that works fine in JSBin: http://jsbin.com/libesocage/1/edit?html,js,output
Eben
@eben-roux
Apr 25 2017 20:00
you mean in the Component.extend bit? Tried and, yes, doesn't make a difference :)
@phillipskevin : odd...
Kevin Phillips
@phillipskevin
Apr 25 2017 20:04
if you change export default Component.extend({ to export default Component.extend({ seal: false }, { does the error go away?
not suggesting that as a permanent fix, but you’ll be able to tell whether this is actually the DefineMap throwing the error
Eben
@eben-roux
Apr 25 2017 20:05
like so?
export default Component.extend({ seal: false }, {
    tag: 'sentinel-input',
    view,
    ViewModel: ViewModel
});
same error though
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 20:06
Try on the DefineMap, like this (I think this is what @phillipskevin meant):
export const ViewModel = DefineMap.extend({seal: false}, {
    value: { type: 'string', value: 'xyz' }
});
Kevin Phillips
@phillipskevin
Apr 25 2017 20:07
yeah, my mistake… on the DefineMap
Eben
@eben-roux
Apr 25 2017 20:08
tried that too... didn't work... however, I think it may have to do with how it is being used in other components
when I place it into the main "form" it works fine
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 20:09
Are you binding value to an outside component, perhaps?
Eben
@eben-roux
Apr 25 2017 20:09
I'll investigate some more... thanks for the hints
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 20:09
Two-way bindings especially can get tricky.
Eben
@eben-roux
Apr 25 2017 20:10
ah... you may be onto something. I'll dig a bit more and check it out.
found it!
it was the 2-way binding
Was binding value from an outer component and value hadn't been defined there. So I reckon that sealing business was causing the failure.
thanks for the help...
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 20:13
Happy to help. BTW, a pro tip for further design: you can give your DefineMap subclasses names by passing in a string before the other arguments.
This can help you track down in development mode what kind of objects are throwing sealed object errors by examining them on a break-on-exception.
Eben
@eben-roux
Apr 25 2017 20:15
That is handy. I'll do that.
If I can bug you with another thing. I am getting this warning: can-component: sentinel-alerts is sharing a single map across all component instances
Eben
@eben-roux
Apr 25 2017 20:21
Don't quite know whether it is something that requires attention
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 20:22
It may.
This happens when you give a DefineMap, SimpleMap, or Map instance as the viewModel property, rather than the constructor class or a plain object.
Eben
@eben-roux
Apr 25 2017 20:25
My sentinel-alerts component actually is a single kinda thing. I have only one on the main page and it uses a singleton map. I guess I could refactor it to have a local map.
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 20:25
It's up to you. The warning will be removed in production.
Eben
@eben-roux
Apr 25 2017 20:25
That makes sense. I guess I could use a constructor but have it, internally, reference the "singleton"
While I am being annoying: I implementing on v3.0 and, btw, I am really enjoying the structure and API...
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 20:27
If you want to use a singleton and avoid the warning entirely, you can set viewModel to be a function that returns it.
Eben
@eben-roux
Apr 25 2017 20:27
I am also getting these warnings:
log.js:94 WARN: js/deparam/deparam is deprecated; please use can-deparam instead: https://github.com/canjs/can-deparam
log.js:94 WARN: js/param/param is deprecated; please use can-param instead: https://github.com/canjs/can-param
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 20:28
Yes, this is new as of very recently. We've moved those libs out of can-util because they're generally useful on their own.
Eben
@eben-roux
Apr 25 2017 20:29
ok, so an update of sorts should solve it?
the function works a charm btw, thanks... will be picking up the tricks as I go along... last I had time to use/develop on canjs was last year
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 20:30
You should have those modules downloaded already if you're seeing the warning, so add "can-param" and "can-deparam" to your "dependencies" in package.json, and change any references to can-util/js/[de]param/ to their package equivalents.
Kevin Phillips
@phillipskevin
Apr 25 2017 20:30
those warnings could be internal to canjs also
not sure if we’ve updated everything to use the new packages instead of the can-util modules
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 20:31
good point.
Eben
@eben-roux
Apr 25 2017 20:31
I don't recall referencing/using those anywhere but I'll keep it in mind
Kevin Phillips
@phillipskevin
Apr 25 2017 20:31
if it’s in our code it should be fixed in the near future
so you can ignore them for now
Eben
@eben-roux
Apr 25 2017 20:32
cool beans, will ignore for now since they aren't interfering anyway
Nico R.
@nriesco
Apr 25 2017 22:09
@bmomberger-bitovi thank you very much for your help!
I finally made it work but using a more classic binding
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 22:09
You're welcome @nriesco
What does your more classic binding look like?
Nico R.
@nriesco
Apr 25 2017 22:10
I’m updating the post on the blog as we speak
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 22:10
Ah, excellent.
Nico R.
@nriesco
Apr 25 2017 22:13
<my-app-address {(new-address)}="newAddressViewModel.newAddress" />
that is the key
newAddress is the element that holds any new instance
and newAddressViewModel is the model that controlls it
so in the main vm you can actually call newAddressViewModel.method()
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 22:14
Ah, of course. So if the child address component does not have a new instance, then the parent is aware of that before attempting to process it.
Nico R.
@nriesco
Apr 25 2017 22:26
exactly
this is how a save looks like:
saveElement: function(scope, back) {
    var self = this;
    self.newInstance.save().then((result) => {
      let customerId = result._id;
      self.newLocationViewModel.newInstance.customerId = customerId;
      self.newLocationViewModel.saveElement().then((result) => {
        self.goBack();
      });
    });
  }
I recommend using var self = this
it saves a lot of time debugging strange things
Brad Momberger
@bmomberger-bitovi
Apr 25 2017 22:29
I could see that, if your code is being transpiled.
I've run across the same thing where in the console I really needed to use something like _this6 instead of this