These are chat archives for canjs/canjs

21st
Sep 2017
Yeswanth Raghav T
@tyraghav
Sep 21 2017 10:16

Hi All
I have this statement in my stache file

<tr id ="row" ($click)="rowClicked(%element)">

Is the function rowClicked should only be present in viewModel of can.component..??
I want to place this method in can.control.extend
When I tried with function in can.control.extend i got couldn't find method named rowClicked exception
Please help me

Brad Momberger
@bmomberger-bitovi
Sep 21 2017 15:32

Controls aren't part of the scope @tyraghav, and not available in templates. The only way you can use control functions as event handlers is to bind them within the control. so for example, adding this key to the control:

"tr click": "rowClicked",

will bind a delegate event handler to the control's element that fires for all trs.

@runn-vermel can you show us the issues in more detail?
Yeswanth Raghav T
@tyraghav
Sep 21 2017 15:48
Thank you Brad
Chasen Le Hara
@chasenlehara
Sep 21 2017 16:05
Hi @/all, the core team is launching a new community survey: https://www.bitovi.com/blog/help-us-improve-canjs-stealjs-and-the-rest-of-the-donejs-family
That blog post has all the details, but a quick overview: sign up for the survey and you’ll receive an email every six weeks asking for your opinion on CanJS and what issues we should prioritize.
We will look at every single response and use it to prioritize what the team works on, so short of hiring us to work on something in particular, this is the best way to have a direct impact on our priorities.
We’re going to send out the first survey tomorrow(!), so please sign up here to receive it: https://donejs.com/survey.html
I’m happy to answer any questions about the survey. :)
Runn Vermel
@runn-vermel
Sep 21 2017 22:15
totally unrelated to my chai-as promised question: i'm getting this warning: "Assigning a DefineMap or constructor type to the viewModel property may not be what you intended. Did you mean ViewModel instead? More info: https://canjs.com/doc/can-component.prototype.ViewModel.html" - there's no indication as to what file this came from....
what would be a good thing to search for in my files? i've searched for the string "viewModel": and looked at all occurrences, but not sure what i'm looking for...
Brad Momberger
@bmomberger-bitovi
Sep 21 2017 22:17
Anything like viewModel: DefineMap.extend({... would trigger that.
Runn Vermel
@runn-vermel
Sep 21 2017 22:18
ok. how do i fix this? what's wrong with it the aforementioned way?
@bmomberger-bitovi ^
Brad Momberger
@bmomberger-bitovi
Sep 21 2017 22:20
Use the capital-V ViewModel when using a format like that. When you use ViewModel in Components, and Type and Value in DefineMaps (note that they all start with capital letters) we treat those as constructors and call new on them.
Runn Vermel
@runn-vermel
Sep 21 2017 22:20
i see - when we extend a definemap, we want to create a new instance, and do that with the capital V - did i get that right?
Brad Momberger
@bmomberger-bitovi
Sep 21 2017 22:21
In the other cases, viewModel, type, and value, functions are assumed to be regular functions that return instances, and not constructors -- plain objects and primitives will be treated differently as well
Yes. Extending a DefineMap creates a new constructor function, which can create instances. When you pass a constructor as ViewModel, can-component automatically creates an instance and passes in any bound values.
Runn Vermel
@runn-vermel
Sep 21 2017 22:23
got it!
ok, so, doing that gave me this: "Cannot provide both a ViewModel and a viewModel property"
i only have the one ViewModel on it
Brad Momberger
@bmomberger-bitovi
Sep 21 2017 22:24
Do you also have scope?
scope is an alias for small-v viewModel
Runn Vermel
@runn-vermel
Sep 21 2017 22:26
found it - was extending the component i just changed the V on, and that broke the extended component - which i fixed by giving it a capital V as well...
thanks for your help and explanation, @bmomberger-bitovi !
Brad Momberger
@bmomberger-bitovi
Sep 21 2017 22:27
Oooh, you know we should definitely consider that as an issue! Would you please file that in https://github.com/canjs/can-component/issues?
Runn Vermel
@runn-vermel
Sep 21 2017 22:30
yes! i'll try to get to it today :)
ok, I have another question, while i got you...
i'm getting this warning: "js/ajax/ajax is deprecated; please use can-ajax instead: https://github.com/canjs/can-ajax"
a couple of things: 1. the official can-ajax page returns a 404. you can't help me there.
Brad Momberger
@bmomberger-bitovi
Sep 21 2017 22:32
can-ajax will be in 3.11.0 and our docs are fixed on 3.10.3, so that's why you can't find them yet.
Runn Vermel
@runn-vermel
Sep 21 2017 22:32
  1. i'm not sure why i'm seeing this at all. i tried replacing util.ajax with the can-ajax, but i got errors, and since there is no docs to read.... i didn't get very far
so, i can ignore this warning?
Kevin Phillips
@phillipskevin
Sep 21 2017 22:33
yes
Brad Momberger
@bmomberger-bitovi
Sep 21 2017 22:33
Oh yes, you can ignore it.
Runn Vermel
@runn-vermel
Sep 21 2017 22:33
i mean, if it's not released, and already deprecates uti.ajax...
Kevin Phillips
@phillipskevin
Sep 21 2017 22:33
the docs are not released
Runn Vermel
@runn-vermel
Sep 21 2017 22:34
this is the last warning - i just went through with my team mate to change all $click and data bindings to the new format (love it, btw). i wish i could get rid of it, just so i can have no warnings :)
Kevin Phillips
@phillipskevin
Sep 21 2017 22:34
and can-util/dom/ajax/ajax will still be there until 4.0, it will just give that warning
maybe you can... if you find what is using can-util/dom/ajax/ajax
Brad Momberger
@bmomberger-bitovi
Sep 21 2017 22:35
I am guessing that you're seeing that warning because can-connect is still using can-util/js/ajax/ajax.
Runn Vermel
@runn-vermel
Sep 21 2017 22:35
well, i found it, but i don't know how to use the can-ajax - which i assume uses a different syntax, because just switching gave me errors
Kevin Phillips
@phillipskevin
Sep 21 2017 22:35
yeah, so if you want to put in a PR to can-connect we'd be happy to release a patch @runn-vermel
Brad Momberger
@bmomberger-bitovi
Sep 21 2017 22:36
We should probably add that to 3.11 issues.
Kevin Phillips
@phillipskevin
Sep 21 2017 22:36
no, it's the same syntax
just extracted out of can-util
Runn Vermel
@runn-vermel
Sep 21 2017 22:36
gotcha - so it probably is can-connect
ok, looking through can-connect, it looks like the only file this is being called is the one @bmomberger-bitovi pointed out - the url.js one. i'm happy to put in a pr that changes that to can-ajax
Kevin Phillips
@phillipskevin
Sep 21 2017 22:39
:thumbsup: that would be great
Brad Momberger
@bmomberger-bitovi
Sep 21 2017 22:40
Just put together a PR canjs/can-connect#352
There was also a test file calling it directly
Kevin Phillips
@phillipskevin
Sep 21 2017 22:40
need to install it
Brad Momberger
@bmomberger-bitovi
Sep 21 2017 22:40
ah, good call
Kevin Phillips
@phillipskevin
Sep 21 2017 22:40
add it as a dependency I mean
Runn Vermel
@runn-vermel
Sep 21 2017 22:41
@bmomberger-bitovi beat me to it!
@bmomberger-bitovi ++
Brad Momberger
@bmomberger-bitovi
Sep 21 2017 22:43
As soon as Travis passes, I'll merge and release.
Runn Vermel
@runn-vermel
Sep 21 2017 22:43
god, i miss travis.
hey - do you guys have good examples of running unit tests on canjs viewModels? i've tried writing some tests for code that was in a viewModel, and ran into issues, since the viewModel was designed to be "included" inside a component...
i'm using chai with mocha, btw
Brad Momberger
@bmomberger-bitovi
Sep 21 2017 22:47
view models don't have automatic access to the DOM. In some use cases we put the component element or a child element on it when initting the component, but you should be able to stub that out with a dummy element.
Runn Vermel
@runn-vermel
Sep 21 2017 22:48
can you point me to an example that does this please?
(if you can think of one..)
Brad Momberger
@bmomberger-bitovi
Sep 21 2017 22:48
It's mostly been on client work that I do this, but let me see if I can sanitize an example.
Runn Vermel
@runn-vermel
Sep 21 2017 22:49
you rock :)
Brad Momberger
@bmomberger-bitovi
Sep 21 2017 22:54
can-connect 1.5.9 is up, references can-ajax, should get rid of that warning. I'll write up the release notes soon
Chasen Le Hara
@chasenlehara
Sep 21 2017 22:55
With regards to testing view models, I think this sample code has some decent examples: https://github.com/donejs/bitballs/blob/563e5e1e873164a4e2fdf9a744d89f899a18b15e/public/components/player/list/list_test.js
A lot of the tests are focused on just changing properties or calling methods on the view model: https://github.com/donejs/bitballs/blob/563e5e1e873164a4e2fdf9a744d89f899a18b15e/public/components/player/list/list_test.js#L39-L44
Another useful thing to do is use can-view-model to get the view model from a component that you’re testing: https://github.com/donejs/bitballs/blob/563e5e1e873164a4e2fdf9a744d89f899a18b15e/public/components/game/details/details_test.js
Brad Momberger
@bmomberger-bitovi
Sep 21 2017 22:58
:point_up: (2-3 back) This is the right way to test viewModels in isolation for unit testing, especially since rendering and testing the visuals is expensive (computationally and in programmer time)
Runn Vermel
@runn-vermel
Sep 21 2017 22:58
fantastic!
so, i grabbed the new can-connect, and replaced all my util.ajax with Ajax.ajax (i did a import Ajax from "can-ajax"), and it's telling me that Ajax.ajax is not a function :(
Chasen Le Hara
@chasenlehara
Sep 21 2017 23:00
I think you can just call Ajax() in your code
Runn Vermel
@runn-vermel
Sep 21 2017 23:00
let me give that a shot
ok, that fixed it, but something is still bringing in js/ajax/ajax
i gotta run - thanks for your help, everyone!
Brad Momberger
@bmomberger-bitovi
Sep 21 2017 23:04

If you need to seriously check out how stuff happens in the DOM, you can render the component in a test container and get back the view model instance with can-view-model to manipulate it. You can also write FuncUnit tests that test the functionality in practice like this:

    it('clicking the previous button goes back to step 1', (done) => {
      var $buttons = $('.button-panel').children();
      F($buttons.eq(0)).click(() => {
        setTimeout(() => {
          assert.isTrue($(".steps").eq(0).is(':visible'), '1st step is visible');
          assert.equal($(".steps").filter(':hidden').length, 2, '2 steps are hidden');

          // advance back to step 2
          F($buttons.eq(0)).click(() => {
            setTimeout(() => {
              done();
            }, 1);
          });
        }, 1);
      });
    });

You can see how it's comparatively messy and stateful. The big benefit of having views tightly bound to the viewmodel data is that you can assume that it works because we already wrote and tested the code that does the rendering.