These are chat archives for canjs/canjs

10th
May 2017
Kevin Phillips
@phillipskevin
May 10 2017 00:11 UTC
for progressive loading of pages
you can bundle each pages’ main separately
Frank Lemanschik
@frank-dspeed
May 10 2017 00:11 UTC
yes thats true but then why not load a shared module
in all this mains?
Gira Minus
@gKreator
May 10 2017 01:29 UTC
image.png
Brad Momberger
@bmomberger-bitovi
May 10 2017 01:30 UTC
your Map type is also your List type. Is that intended?
Gira Minus
@gKreator
May 10 2017 01:30 UTC
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 UTC
hah, I just realized that you didn't paste in can-connect options. :)
Gira Minus
@gKreator
May 10 2017 01:31 UTC
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 UTC
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 UTC
yeah it will just be like a $( '#date-field' ).datePicker({ etc.. });
ahh
Brad Momberger
@bmomberger-bitovi
May 10 2017 01:34 UTC
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 UTC
ahh thats perfect
forgot about the $inserted
Brad Momberger
@bmomberger-bitovi
May 10 2017 01:35 UTC
stache helpers are also fine for this.
stache.registerHelper("datepicker", function(){ return function(el){ $(el).datepicker() } })
Gira Minus
@gKreator
May 10 2017 01:36 UTC
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 UTC
and then <input {{datepicker}}>
Gira Minus
@gKreator
May 10 2017 01:36 UTC
thanks very much!!
Brad Momberger
@bmomberger-bitovi
May 10 2017 01:36 UTC
You're welcome.
Gira Minus
@gKreator
May 10 2017 01:36 UTC
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 UTC
If you write it up as an article I'll RT you.
Gira Minus
@gKreator
May 10 2017 01:48 UTC
Will definitely let you know when I do
Gira Minus
@gKreator
May 10 2017 02:34 UTC
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 UTC
Splice command, you mean?
Gira Minus
@gKreator
May 10 2017 02:37 UTC
yeah
Brad Momberger
@bmomberger-bitovi
May 10 2017 02:37 UTC
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 UTC
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 UTC
you don’t have %index in the template?
Brad Momberger
@bmomberger-bitovi
May 10 2017 02:40 UTC
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 UTC
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 UTC
yeah ../%index should work
although it’s ugly
Gira Minus
@gKreator
May 10 2017 02:41 UTC
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 UTC
Of course not, but a filter could find the object to pass to indexOf
Gira Minus
@gKreator
May 10 2017 02:42 UTC
image.png
ahh true
I'll play with it
thanks!
Gira Minus
@gKreator
May 10 2017 02:57 UTC
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 UTC
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 UTC
image.png
Julian
@pYr0x
May 10 2017 07:37 UTC
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 UTC
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 UTC
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 UTC
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 UTC
@frank-dspeed i think they mean https://stealjs.com/docs/load.metadata.html -> exports
Frank Lemanschik
@frank-dspeed
May 10 2017 09:40 UTC
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 UTC
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 UTC
@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 UTC
@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 UTC
cool beans :)
Guido Smeets
@gsmeets
May 10 2017 12:14 UTC
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 UTC

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 UTC
yeah, that's what I already figured ;)
Dovid Bleier
@dbleier
May 10 2017 17:34 UTC
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 UTC
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 UTC
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 UTC
@dbleier you installed the so called single package version
you need to use can.map
Dovid Bleier
@dbleier
May 10 2017 17:38 UTC
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 UTC
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 UTC
you should consider installing can-map via npm
npm install can-map --save
Dovid Bleier
@dbleier
May 10 2017 17:40 UTC
@frank-dspeed so I need to do that for every package individually?
Brad Momberger
@bmomberger-bitovi
May 10 2017 17:40 UTC
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 UTC
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 UTC
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 UTC
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 UTC
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 UTC
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 UTC
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 UTC
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 UTC
hmm. I am not using can.view as far as I can tell.
Brad Momberger
@bmomberger-bitovi
May 10 2017 18:34 UTC
It might be used by done-component which is rendering your modal component.
Dovid Bleier
@dbleier
May 10 2017 18:34 UTC
unless it means the reference to the view (formerly template) in the Component
Brad Momberger
@bmomberger-bitovi
May 10 2017 18:35 UTC
You might want to upgrade done-component to 1.0.0, which is the latest.
Dovid Bleier
@dbleier
May 10 2017 18:35 UTC
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 UTC
:+1:
Dovid Bleier
@dbleier
May 10 2017 18:41 UTC
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 UTC
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 UTC
yeah, I see that, thanks.
Dovid Bleier
@dbleier
May 10 2017 18:52 UTC
okay, looks like all dependency errors are fixed. Thanks so much @bmomberger-bitovi
Brad Momberger
@bmomberger-bitovi
May 10 2017 18:53 UTC
Sweet! Enjoy your fresh, speedy DoneJS app
Gira Minus
@gKreator
May 10 2017 18:53 UTC
blob
out of nowhere all jquery plugins stopped working
wacky stuff
Brad Momberger
@bmomberger-bitovi
May 10 2017 18:56 UTC
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 UTC
Would foreach be causing issues like that?
Ohh i get it
Brad Momberger
@bmomberger-bitovi
May 10 2017 19:00 UTC
yes, I think that it's likely
Gira Minus
@gKreator
May 10 2017 19:05 UTC
Any clues on the jquery issue?
Brad Momberger
@bmomberger-bitovi
May 10 2017 19:06 UTC
check for two versions of jQuery. The one with the plugins might have noConflict'ed itself.
Gira Minus
@gKreator
May 10 2017 19:08 UTC
Sweet thanks
Julian
@pYr0x
May 10 2017 20:40 UTC
@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 UTC
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