These are chat archives for canjs/canjs

10th
May 2017
Kevin Phillips
@phillipskevin
May 10 2017 00:11
for progressive loading of pages
you can bundle each pages’ main separately
Frank Lemanschik
@frank-dspeed
May 10 2017 00:11
yes thats true but then why not load a shared module
in all this mains?
Gira Minus
@gKreator
May 10 2017 01:29
image.png
Brad Momberger
@bmomberger-bitovi
May 10 2017 01:30
your Map type is also your List type. Is that intended?
Gira Minus
@gKreator
May 10 2017 01:30
quick question nothing too hard, that renders a form on the front end via stache. is the get method a good place to apply a jquery plugin?
ahh crap type
typo*
it works tho lol
Was supposed to be value
Brad Momberger
@bmomberger-bitovi
May 10 2017 01:31
hah, I just realized that you didn't paste in can-connect options. :)
Gira Minus
@gKreator
May 10 2017 01:31
ahh yes this is a viewModel on a component
so yeah the question... is the get method a good place to apply a jquery datepicker plugin on a field that is rendered after the get/filter
or is there a better place?
i know it will work from the get method... but just want to make sure im doing the better thing
Brad Momberger
@bmomberger-bitovi
May 10 2017 01:33
In general the viewModel shouldn't know about elements, but it's probably fine to use it as a place for simple functions that you pass the element to.
I wouldn't do like some_field: { get: function() { $("some selector").datepicker() } }
Gira Minus
@gKreator
May 10 2017 01:33
yeah it will just be like a $( '#date-field' ).datePicker({ etc.. });
ahh
Brad Momberger
@bmomberger-bitovi
May 10 2017 01:34
but you could have a function on the VM like datepicker: function(el) { $(el).datepicker() }
and just do <input ($inserted)="datepicker(%element)"> in the stache
Gira Minus
@gKreator
May 10 2017 01:34
ahh thats perfect
forgot about the $inserted
Brad Momberger
@bmomberger-bitovi
May 10 2017 01:35
stache helpers are also fine for this.
stache.registerHelper("datepicker", function(){ return function(el){ $(el).datepicker() } })
Gira Minus
@gKreator
May 10 2017 01:36
both ideas sound better... i knew the get method was going to be like 4th place in this
Brad Momberger
@bmomberger-bitovi
May 10 2017 01:36
and then <input {{datepicker}}>
Gira Minus
@gKreator
May 10 2017 01:36
thanks very much!!
Brad Momberger
@bmomberger-bitovi
May 10 2017 01:36
You're welcome.
Gira Minus
@gKreator
May 10 2017 01:36
I should compile all my QA's and place them on the forum lol some of these things are just not super apparent
Brad Momberger
@bmomberger-bitovi
May 10 2017 01:37
If you write it up as an article I'll RT you.
Gira Minus
@gKreator
May 10 2017 01:48
Will definitely let you know when I do
Gira Minus
@gKreator
May 10 2017 02:34
Another quick question, on a click event what is the best way to remove a List item. Is it by using index on the slice command? Or is there something like item.remove()?
Brad Momberger
@bmomberger-bitovi
May 10 2017 02:37
Splice command, you mean?
Gira Minus
@gKreator
May 10 2017 02:37
yeah
Brad Momberger
@bmomberger-bitovi
May 10 2017 02:37
Yes, we don't have any special remove by index or by matching object functions on DefineList
So splice using the matching index would be the way to go.
Gira Minus
@gKreator
May 10 2017 02:39
Yup thanks, that's what I've been doing. Just wanted to make sure their isn't some easier way. Was just wondering because I have to forEach loop into a nested List a few times
to get the index
Kevin Phillips
@phillipskevin
May 10 2017 02:40
you don’t have %index in the template?
Brad Momberger
@bmomberger-bitovi
May 10 2017 02:40
one thing we do provide, if it helps, is to filter a list based on a matching object (by properties rather than object equality) rather than a predicate function
Gira Minus
@gKreator
May 10 2017 02:40
I do, but I am nested... I guess could I pass the parents index by like ../%index ?
Kevin Phillips
@phillipskevin
May 10 2017 02:41
yeah ../%index should work
although it’s ugly
Gira Minus
@gKreator
May 10 2017 02:41
Wait also... is the index the same if the object is filtered?
no way it is
Brad Momberger
@bmomberger-bitovi
May 10 2017 02:42
Of course not, but a filter could find the object to pass to indexOf
Gira Minus
@gKreator
May 10 2017 02:42
image.png
ahh true
I'll play with it
thanks!
Gira Minus
@gKreator
May 10 2017 02:57
One more question.. :D ... I've had this problem where I do a return list.sort() on a get method, and it gets stuck in an infinite loop, after the list gets updated. My work around has been to use return list.serialize().sort()
this was before I was defining the Type to the proper property tree
Gira Minus
@gKreator
May 10 2017 04:56
image.png
image.png
this is a new one, when splicing out an object... it gets removed from the view but now the actual list
not from*
it gets set to an empty object on non serialized
scratch that last line ^^ it is still there
Gira Minus
@gKreator
May 10 2017 05:07
image.png
Julian
@pYr0x
May 10 2017 07:37
is there a good way to inspect / debug viewModels of components ? today i have to use $(...).viewModel() every time. is there a better way to track the VM and its property?
because i use stealjs the VM is encapsulated in the module and i have no access on the window object.
@matthewp do you know a good way to inspect variable on my different stealjs modules?
Frank Lemanschik
@frank-dspeed
May 10 2017 07:40
good question
i had same question 2 weeks befor
the answer was that i need to use steal load export some how
or in my code directly attach the vars also on window object
Frank Lemanschik
@frank-dspeed
May 10 2017 07:46
i don't found the steal load export example but window.myView = myViewModel
should do the trick
ofcourse add a if window exist or something if you use done ssr
@bmomberger-bitovi can you again point out the module require load method from steal that you can use to attach a existing viewModel to window ?
and if you need a good place to do so i do it in init(){} on DefineMap
steal.loader.import("viewModel").then(function(viewModel) {
  // Use viewModel
  window.myModel = viewModel;
});
Frank Lemanschik
@frank-dspeed
May 10 2017 08:02
i add to my applications sometimes by the way a debug.js that i simply load that attaches all vars directly also to window for inspection
i simply load it conditional based on environment
Julian
@pYr0x
May 10 2017 09:25
@frank-dspeed i think they mean https://stealjs.com/docs/load.metadata.html -> exports
Frank Lemanschik
@frank-dspeed
May 10 2017 09:40
hehehe no
this was the answer to your question how to access the viewModel and assign it to window
and the method i posted is right for that
steal.loader.import loads or takes whats loaded with that module name and then gives you access to it so you can do windows.myModel = viewModel
i call that export but linking or referencing it would be probally more right
steal.loader.import("viewModel") == promis that returns var viewModel out of your app.js
or lets say takes whats ever exported under the name viewModel
Szabolcs Schmidt
@sszabolcs
May 10 2017 11:22
Hi!
With CanJS 2 I can easily send a webtoken in the request header with every ajax request by registering a jQuery ajaxPrefilter method.
I would like to know how to implement this functionality with can-connect.
Eben
@eben-roux
May 10 2017 11:25
@sszabolcs I had the same question :) --- answer was to pass an option to can-connect along the lines of { ajax: $.ajax }... in my case like so:
connect([constructor, data, map], {
    url: loader.serviceBaseURL + 'users/{id}/roles',
    Map: Model,
    List: Model.List,
    name: 'user-role',
    ajax: $.ajax
});
then the bits you add to the global prefilter will go along for the ride
Szabolcs Schmidt
@sszabolcs
May 10 2017 11:28
@eben-roux :smile: thanks a lot! I'll give it a try!
@eben-roux works like a charm :smile: Thanks!!!
Eben
@eben-roux
May 10 2017 11:47
cool beans :)
Guido Smeets
@gsmeets
May 10 2017 12:14
does anyone know what the equivalents are for can.view.attr and can.view.tag in 3.x?
can't find anything related to those in the docs
and just when I ask I see can.view.callbacks
derp
Szabolcs Schmidt
@sszabolcs
May 10 2017 13:26

In legacy.js is see:

// Legacy namespacing for these
can.view.attr = can.view.callbacks.attr;
can.view.tag = can.view.callbacks.tag;

So I think can-view-callbacks is the equivalent.

Guido Smeets
@gsmeets
May 10 2017 14:21
yeah, that's what I already figured ;)
Dovid Bleier
@dbleier
May 10 2017 17:34
I am in the process of finally migrating to 3.0, I have updated my code to the modernized path, so using import CanMap from 'can-map'; but when I try to run my tests I get a 404 on can-map
Brad Momberger
@bmomberger-bitovi
May 10 2017 17:35
can you verify that can-map is installed in node-modules and as a dependency in package.json?
Dovid Bleier
@dbleier
May 10 2017 17:37
it is in node_modules but only "can": "^3.6.0", is in package.json. Do I need include every new package in package.json? Why didn't npm do that when I installed can3?
Frank Lemanschik
@frank-dspeed
May 10 2017 17:38
@dbleier you installed the so called single package version
you need to use can.map
Dovid Bleier
@dbleier
May 10 2017 17:38
I did what was in the migration guide, but I do see all the separate packages in node_modules
Brad Momberger
@bmomberger-bitovi
May 10 2017 17:39
or you can copy all the dependencies from node_modules/can/package.json into your site's package.json
Frank Lemanschik
@frank-dspeed
May 10 2017 17:39
you should consider installing can-map via npm
npm install can-map --save
Dovid Bleier
@dbleier
May 10 2017 17:40
@frank-dspeed so I need to do that for every package individually?
Brad Momberger
@bmomberger-bitovi
May 10 2017 17:40
I would maybe avoid that if you're using the can package anywhere, since you might start getting version mismatches. Each release of can is fixed on particular dependency versions.
Dovid Bleier
@dbleier
May 10 2017 17:40
I removed all references to can as suggested in the pre-migration instructions
what is recommended to grab all the dependencies or hand install the packages I am already using?
btw, perhaps someone should update the migration docs in the modernized path to mention that one needs to install each package individually
Brad Momberger
@bmomberger-bitovi
May 10 2017 17:44
That isn't what the migration guide says.
There is a reference to can-map in the sidebar about avoiding namespace collisions, which should probably be can/map/map, but the guide says to import individual libs by referencing subfolders of can
If you do import CanMap from 'can/map/map'; you don't need to have an installed reference to can-map
Brad Momberger
@bmomberger-bitovi
May 10 2017 17:49
I just made a PR against the migration guide so as to remove the reference in the aside.
Dovid Bleier
@dbleier
May 10 2017 17:50
yes, but in the modernized migration path, it advocates moving from can/map/map to can-map but doesn't mention to specifically npm import the packages separately. I guess that should be obvious to those updating package.json often, but it would be helpful to mention it explicitly or to manually update package.json
ok
anyway I took your suggestion @bmomberger-bitovi to copy can's dependency list and that took care of all errors but one
Error loading "cms@5.6.3#modal.component!done-component@0.4.1#component" at <unknown>
Error loading "cms@5.6.3#modal.component!done-component@0.4.1#component" from "cms@5.6.3#sign-controls/sign-controls_test" at http://10.0.0.1:9001/src/sign-controls/sign-controls_test.js
Error loading "can@3.6.0#view/elements" at http://10.0.0.1:9001/node_modules/can/view/elements.js
Error loading "can@3.6.0#view/elements" from "done-component@0.4.1#component" at http://10.0.0.1:9001/node_modules/done-component/component.js
File not found: http://10.0.0.1:9001/node_modules/can/view/elements/index.js undefined
(anonymous) @ steal.js:6329
tryCatchReject @ steal.js:1183
runContinuation1 @ steal.js:1142
Rejected.when @ steal.js:963
Pending.run @ steal.js:821
Scheduler._drain @ steal.js:97
Scheduler.drain @ steal.js:62
run @ steal.js:268
Brad Momberger
@bmomberger-bitovi
May 10 2017 17:51
It does give reference to installing the modules, but doesn't show you how. So that's definitely something we could improve there.
ah, I think i see the issue but let me verify
Dovid Bleier
@dbleier
May 10 2017 17:53
arg, need to run out. Will check for your response when I get back, in about half an hour
Brad Momberger
@bmomberger-bitovi
May 10 2017 18:00
It looks like we removed most of that with 3.0 (it probably ended up in stache or can-view-target), but if you're using using can.view.element.after and can.view.elements.replace, you can use can-util/dom/mutate/mutate.appendChild and can-util/dom/mutate/mutate.replaceChild
Ah, I found it. That package is now can-legacy-view-helpers
you can find the elements.js script there.
Dovid Bleier
@dbleier
May 10 2017 18:33
hmm. I am not using can.view as far as I can tell.
Brad Momberger
@bmomberger-bitovi
May 10 2017 18:34
It might be used by done-component which is rendering your modal component.
Dovid Bleier
@dbleier
May 10 2017 18:34
unless it means the reference to the view (formerly template) in the Component
Brad Momberger
@bmomberger-bitovi
May 10 2017 18:35
You might want to upgrade done-component to 1.0.0, which is the latest.
Dovid Bleier
@dbleier
May 10 2017 18:35
export default Component.extend({
    tag: 'sign-controls',
    viewModel: ViewModel,
    view,
    events: {
        "inserted": () => {
            $('#SignSettings').sticky({ topSpacing: 20, zIndex: 1000 });
        }
    }
});
ok
that worked.
upgrading
Brad Momberger
@bmomberger-bitovi
May 10 2017 18:39
:+1:
Dovid Bleier
@dbleier
May 10 2017 18:41
thanks @bmomberger-bitovi
having a steal-stache issue, but am working thru the steal 1 upgrade docs, so hopefully that will fix it
Brad Momberger
@bmomberger-bitovi
May 10 2017 18:42
All the steal plugins you use (steal-css, steal-less, steal-stache, etc.) should be in a plugins array in your steal config.
This changed with (if I remember correctly) steal 1.3
Dovid Bleier
@dbleier
May 10 2017 18:44
yeah, I see that, thanks.
Dovid Bleier
@dbleier
May 10 2017 18:52
okay, looks like all dependency errors are fixed. Thanks so much @bmomberger-bitovi
Brad Momberger
@bmomberger-bitovi
May 10 2017 18:53
Sweet! Enjoy your fresh, speedy DoneJS app
Gira Minus
@gKreator
May 10 2017 18:53
blob
out of nowhere all jquery plugins stopped working
wacky stuff
Brad Momberger
@bmomberger-bitovi
May 10 2017 18:56
ahaha. If you need to mutate a list while iterating, I strongly recommend using a for loop instead of forEach
and do it in reverse if there might be more than one splice, so for(var i = this.unassigned_route.unassigned_route_to_location.length - 1; i >= 0; i--) { ...
Gira Minus
@gKreator
May 10 2017 18:59
Would foreach be causing issues like that?
Ohh i get it
Brad Momberger
@bmomberger-bitovi
May 10 2017 19:00
yes, I think that it's likely
Gira Minus
@gKreator
May 10 2017 19:05
Any clues on the jquery issue?
Brad Momberger
@bmomberger-bitovi
May 10 2017 19:06
check for two versions of jQuery. The one with the plugins might have noConflict'ed itself.
Gira Minus
@gKreator
May 10 2017 19:08
Sweet thanks
Julian
@pYr0x
May 10 2017 20:40
@bmomberger-bitovi you talked about a eslint config file in a hangout
do we have a eslint config for our donejs projects?
Brad Momberger
@bmomberger-bitovi
May 10 2017 21:05
I don't think that was me, unless I said something about the move from jshint to eslint for our projects (which has been proposed). But there is an eslint plugin for donejs: https://www.npmjs.com/package/eslint-plugin-done-component