These are chat archives for canjs/canjs

4th
May 2017
Julian
@pYr0x
May 04 2017 00:26
hi guys... any idea why {$focused} not work anymore
Michael Price
@web-mech
May 04 2017 03:33
canjs/can-define-stream#36
Brad Momberger
@bmomberger-bitovi
May 04 2017 07:25
@pYr0x have you tried that code outside of JSBin? the $focused test for can-stache-bindings still passes, and it does receive focus if you set the value of show to false and then true again after load (I did this from the console)
General question for the channel, as we've been kvetching about it on github: Do you use any other templating languages (other than stache)? Do you like them, and how do they compare to can-stache? Also, if you answer, please indicate whether you consider yourself a developer or designer.
Julian
@pYr0x
May 04 2017 08:20
@bmomberger-bitovi i tested the code in my app and it doesnt worked there too
Frank Lemanschik
@frank-dspeed
May 04 2017 08:21
@bmomberger-bitovi i use HTML with knockout with can viewmodels
I Consider my Self Fullstack Lead engineer :) and compared to stach it is simply logical html with some attributes that are total readable and easy to adopt for any one
Eben
@eben-roux
May 04 2017 09:44
@bmomberger-bitovi : Thanks Brad. Any suggestions on how I should do this? The id is the user id and url is going to need it. The array coming back does not have an id and even if it did it would be the id of the role and not the user.
Julian
@pYr0x
May 04 2017 09:50
@bmomberger-bitovi i tested, to set show = true in console, too. but it didnt worked for me
Brad Momberger
@bmomberger-bitovi
May 04 2017 15:19
@pYr0x did you look at document.activeElement after setting show=true? You won't see the cursor or focus ring since that iframe isn't active. It looks like it's not working on initial render but it definitely is still working. I made a glitch that shows it: https://glitch.com/edit/#!/join/4a70df16-1650-41a7-b70a-4f83aba30722
Brad Momberger
@bmomberger-bitovi
May 04 2017 15:25
@eben-roux the {id} in the template applies to the params passed to findAll() or getListData(), but the algebra operates on the returned data. So an empty algebra that doesn't express an id should be enough for this. Alternately, possibly (I haven't tried this but I think it might work) you could use getData() and set the Model.List type as Map. That should interpret the array as an object, rather than processing each string item
Brad Momberger
@bmomberger-bitovi
May 04 2017 15:33
@frank-dspeed thanks for the response. What does looping look like? Can you make a loop with multiple tags per item? Also, is it easy to render a tree (i.e. render an array of children of a data object just like the parent, nested inside the parent's tags, to an arbitrary depth)?
Gregg Roemhildt
@roemhildtg
May 04 2017 15:34
@bmomberger-bitovi I'd consider myself a front-end dev, but I do work with backend templates on occasion as well, currently using jynja2 templates which are somewhat similar to stache
Brad Momberger
@bmomberger-bitovi
May 04 2017 15:34
@pYr0x the best workaround is to toggle focused after rendering: https://jsbin.com/folupuhese/edit?html,js,console,output
Brad Momberger
@bmomberger-bitovi
May 04 2017 15:51
The issue with trying to set $focused at the start is that the element gets replaced during bindings, and the (stateful) focus() call is happening on the new element before it gets inserted into the DOM. (the focused attribute has a special handler in can-util/dom/attr which calls focus() and blur() )
It looks like there's prior art in can-util/dom/attr to use the "inserted" event (which is a CanJS synthetic event based on mutation observers) on the $value attribute, so I think we can safely add this to $focus as well.
Brad Momberger
@bmomberger-bitovi
May 04 2017 16:01
@pYr0x canjs/can-util#263
Eben
@eben-roux
May 04 2017 17:12
@bmomberger-bitovi Thanks Brad. I have aslightly better understanding now. I am returning a proper object now seeing as I actually define it as such using the DefineMap. Getting there :)
Brad Momberger
@bmomberger-bitovi
May 04 2017 18:15
@pYr0x canjs/can-util#264
Fixed it, and updated the Glitch example to show it working (by importing can-util from the PR branch)
Frank Lemanschik
@frank-dspeed
May 04 2017 18:18
@bmomberger-bitovi you should look into the documentation and yes it is possible and really easy at all http://knockoutjs.com/examples/collections.html
<h2>People</h2>
<ul data-bind="foreach: people">
    <li>
        <div>
            <span data-bind="text: name"> </span> has <span data-bind='text: children().length'>&nbsp;</span> children:
            <a href='#' data-bind='click: addChild '>Add child</a>
            <span class='renderTime' data-bind='visible: $root.showRenderTimes'>
                (person rendered at <span data-bind='text: new Date().getSeconds()' > </span>)
            </span>
        </div>
        <ul data-bind="foreach: children">
            <li>
                <span data-bind="text: $data"> </span>
                <span class='renderTime' data-bind='visible: $root.showRenderTimes'>
                    (child rendered at <span data-bind='text: new Date().getSeconds()' > </span>)
                </span>
            </li>
        </ul>
    </li>
</ul>
<label><input data-bind='checked: showRenderTimes' type='checkbox' /> Show render times</label>
example shows people that have children
Brad Momberger
@bmomberger-bitovi
May 04 2017 18:20
That's not arbitrary depth, though. What if the children have children?
Frank Lemanschik
@frank-dspeed
May 04 2017 18:20
same syntax
// Define a "Person" class that tracks its own name and children, and has a method to add a new child
var Person = function(name, children) {
    this.name = name;
    this.children = ko.observableArray(children);

    this.addChild = function() {
        this.children.push("New child");
    }.bind(this);
}

// The view model is an abstract description of the state of the UI, but without any knowledge of the UI technology (HTML)
var viewModel = {
    people: [
        new Person("Annabelle", ["Arnie", "Anders", "Apple"]),
        new Person("Bertie", ["Boutros-Boutros", "Brianna", "Barbie", "Bee-bop"]),
        new Person("Charles", ["Cayenne", "Cleopatra"])
        ],
    showRenderTimes: ko.observable(false)
};

ko.applyBindings(viewModel);
we can nest in the view model as much as we like
Brad Momberger
@bmomberger-bitovi
May 04 2017 18:23
pre-components we could have named or pathed mustaches and render them recursively:
<li>{{name}}
 <ul>
 {{#each children}}
    {{> showPerson}}
  {{/each}}
</ul>>
</li>
And that works as deep as the children relationship goes.
Frank Lemanschik
@frank-dspeed
May 04 2017 18:25
yes you can archive similar with that also
there is tooling for partials and that around
Brad Momberger
@bmomberger-bitovi
May 04 2017 18:25
OK. That's more what i was wondering about.
Thanks for the insight.
Frank Lemanschik
@frank-dspeed
May 04 2017 18:26
general you compile html partials into var and then use that var
or you write a generator or what you like
but i think this discussion is about templating syntax and that in my point of view the most best i saw
good example to see it all in action is a email template editor
here you can see the block definitions
like artikle block in ko lang they call partials blocks
and you can publish blocks nested with data how you like
don't wonder about the css inside that :) its because the fact its a email template and there is placing css inline always a good idea because rendering in email clients ;)
Julian
@pYr0x
May 04 2017 19:33
hey @bmomberger-bitovi thanks for the fix.
but do you know the problem for < IE11?
Brad Momberger
@bmomberger-bitovi
May 04 2017 19:55
I just finished lunch and I'm going to deep dive into it now.
Julian
@pYr0x
May 04 2017 19:57
:)
if i can help, pls let me know
Brad Momberger
@bmomberger-bitovi
May 04 2017 20:13
I think I know what the problem is. It was kind of a PEBKAC.
Frank Lemanschik
@frank-dspeed
May 04 2017 20:14
what is PEBKAC :)
Brad Momberger
@bmomberger-bitovi
May 04 2017 20:14
Problem Exists Between Keyboard And Chair
Frank Lemanschik
@frank-dspeed
May 04 2017 20:14
ah ok thanks
little question because i only used rest api's at present
how does a can define map property look that i can change and the changes get reflected
a normal string value
Brad Momberger
@bmomberger-bitovi
May 04 2017 20:17
Nothing is wrong with the code, but the test was using native appendChild from a DOM element. When you need a mutation event, you have to use the can-util/dom/mutate/mutate lib to fire fake mutation events when there's no mutation observer like in IE9
Frank Lemanschik
@frank-dspeed
May 04 2017 20:18
i want to set a normal string and mutate it via a function like this.value = 'xxx'
Brad Momberger
@bmomberger-bitovi
May 04 2017 20:18
@frank-dspeed the default for can-define is for a property to be converted to an observable if it's an object, and be left as its value if it's a primitive.
so value: {} is enough to define that.
you can also use the string version value: "observe" which becomes value: { type: "observe" }
Frank Lemanschik
@frank-dspeed
May 04 2017 20:19
{ myVal: { value: "xxx" }}
?
or directly myVal: 'xxx'
Brad Momberger
@bmomberger-bitovi
May 04 2017 20:20
If 'xxx' is a string value you want it to have on init, then it's the first one
Frank Lemanschik
@frank-dspeed
May 04 2017 20:20
yes i want that value on init
and then i can do in any function this.myVal = 'yyy' ?
Brad Momberger
@bmomberger-bitovi
May 04 2017 20:21
Yes, { myVal: { value: "xxx" }} will give it 'xxx' at first and this.myVal = 'yyy' later will update anything bound to it.
Frank Lemanschik
@frank-dspeed
May 04 2017 20:21
ok tryed that but with serialize false
also attached to the myVal
will try it without that
Frank Lemanschik
@frank-dspeed
May 04 2017 20:27
steal.js:7194 Error: Error loading "frontend-room@0.0.0#index.stache!done-autorender@1.0.0#src/autorender" at <unknown>
Error loading "can-view-callbacks@3.0.6#can-view-callbacks" at http://localhost:8080/node_modules/can-view-callbacks/can-view-callbacks.js
Error loading "can-view-callbacks@3.0.6#can-view-callbacks" from "done-autorender@1.0.0#src/autorender" at http://localhost:8080/node_modules/done-autorender/src/autorender.js
: http://localhost:8080/node_modules/can-view-callbacks/can-view-callbacks.js
    at error (steal.js:3069)
    at XMLHttpRequest.xhr.onreadystatechange (steal.js:3079) "Error: Error loading "frontend-room@0.0.0#index.stache!done-autorender@1.0.0#src/autorender" at <unknown>
Error loading "can-view-callbacks@3.0.6#can-view-callbacks" at http://localhost:8080/node_modules/can-view-callbacks/can-view-callbacks.js
Error loading "can-view-callbacks@3.0.6#can-view-callbacks" from "done-autorender@1.0.0#src/autorender" at http://localhost:8080/node_modules/done-autorender/src/autorender.js
: http://localhost:8080/node_modules/can-view-callbacks/can-view-callbacks.js
    at error (http://localhost:8080/node_modules/steal/steal.js:3069:19)
    at XMLHttpRequest.xhr.onreadystatechange (http://localhost:8080/node_modules/steal/steal.js:3079:13)"
looks not good right?
thats probally the update problem of that value right?
view callbacks sounds like something that gets called back on view change
thats why i guess it is related
Brad Momberger
@bmomberger-bitovi
May 04 2017 20:29
Yeah, can-view-callbacks is how we make components and wire up live binding on elements and attributes.
Frank Lemanschik
@frank-dspeed
May 04 2017 20:29
so thats the error and not my cood
code :)
Brad Momberger
@bmomberger-bitovi
May 04 2017 20:29
do you have that file? or rather, has can-view-callbacks been installed by npm?
Frank Lemanschik
@frank-dspeed
May 04 2017 20:29
ok will look what i can do
Brad Momberger
@bmomberger-bitovi
May 04 2017 20:30
Steal errors like that are usually resolved through package maintenance.
Frank Lemanschik
@frank-dspeed
May 04 2017 20:30
ls node_modules/can-view-callbacks
build.js can-view-callbacks.js docs package.json readme.md test
looks existing
the main js is there and rest also
looks valid to me
ok got it working
this error comes when you enter a none existing url
if you use donejs develop and you do localhost:8080/noneexisting/
then the normal main app index get showed but the error comes up
should i create a issue or is that desired?
i think it has something to do with path resolving at all
since it don't finds the module on none existing path via ssr
Brad Momberger
@bmomberger-bitovi
May 04 2017 20:38
I'm guessing that error isn't desired, since it's not very informative as to what's going wrong
You should file a bug report on that one.
Frank Lemanschik
@frank-dspeed
May 04 2017 20:38
it is informativ it says clear file not found :)
that why it has error loading
i am not sure what it is related to ssr or done-serve
hmmm maybe its even pushstate related
Brad Momberger
@bmomberger-bitovi
May 04 2017 20:41
But that file is there in your dev server environment.
Frank Lemanschik
@frank-dspeed
May 04 2017 20:41
yes it is when i enter a existing url
all works thats why i tell it here :)
i don't watched the address bar and thats how i found it
the file is there all is working when i enter a path that don't exists
i get the loading error and index shows up like it should
but the state changes don't work because of this loading error
Brad Momberger
@bmomberger-bitovi
May 04 2017 20:43
I think this goes back to done-ssr throwing an error to the console if you nav to another page before the client has finished loading modules.
Julian
@pYr0x
May 04 2017 20:43
@bmomberger-bitovi thank you very much ! :)
Brad Momberger
@bmomberger-bitovi
May 04 2017 20:43
We saw that happen earlier this week
Frank Lemanschik
@frank-dspeed
May 04 2017 20:43
no i have only a single page
i fresh started coding on that app
then i have a lnvalid link that i clicked
and i verifyed it via manual changing the url
when we have a none existing path like /none/#
then it can't load this module
but it can load the rest
no you are right
this happens only on cached pages cant reproduce
any way i don't think that this happens in production
Brad Momberger
@bmomberger-bitovi
May 04 2017 20:47
I don't either. With a script bundle it wouldn't throw an error about aborting a single script file loading.
Julian
@pYr0x
May 04 2017 20:51
@frank-dspeed is done-autorender installed?
also in the package.json?
Frank Lemanschik
@frank-dspeed
May 04 2017 20:52
sure
all is working well
it is solved already for me only wanted to report that because it was wirred for me
Julian
@pYr0x
May 04 2017 20:53
sorry i dont follow the whole conversation
Frank Lemanschik
@frank-dspeed
May 04 2017 20:54
don't worry your always welcome :)
Julian
@pYr0x
May 04 2017 20:54
;)
Frank Lemanschik
@frank-dspeed
May 04 2017 20:55
@pYr0x how would you fire a function on can define map init?
?
Frank Lemanschik
@frank-dspeed
May 04 2017 20:58
can-define/map/
Julian
@pYr0x
May 04 2017 20:59
a DefineMap
Frank Lemanschik
@frank-dspeed
May 04 2017 21:00
yes :) DefineMap is there some way to supply a init function i ask because i want to listen to a event
and update a value based on that
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:00
That's pretty much it.
new DefineMap({ init() { ... } })
Julian
@pYr0x
May 04 2017 21:01
@bmomberger-bitovi you dont need to extend DefineMap ?
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:01
You can also specify it when extending DefineMap: DefineMap.extend({ init() { ... } })
Frank Lemanschik
@frank-dspeed
May 04 2017 21:01
is init a first value so , { props...} ?
or is init() a prop?
Julian
@pYr0x
May 04 2017 21:02
@bmomberger-bitovi yep there it is like i will do
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:02
init is a prop.
Julian
@pYr0x
May 04 2017 21:02
it is a prototype
DefineMap.extend([name,] [static,] prototype)
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:03
(in ES6 you can write function properties as name() { } instead of name: function() { }, if that wasn't clear)
Frank Lemanschik
@frank-dspeed
May 04 2017 21:03
i don't wrapped my mind so much around all this syntax variations
Julian
@pYr0x
May 04 2017 21:04
:)
Frank Lemanschik
@frank-dspeed
May 04 2017 21:04
but i think i found it
Julian
@pYr0x
May 04 2017 21:04
thats true
@bmomberger-bitovi we also support getter and setter on DefineMap right?
it is supported by steal and the bable precompiler
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:05
Yes. that's also an ES5 feature so no transpilation is required for it.
Julian
@pYr0x
May 04 2017 21:05
that looks similar to a short hand function like name() {} so that is confusing me all the time
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:05
On DefineMap, you can use native getters and setters, but because they're the native JS feature, we can't add async to them.
Julian
@pYr0x
May 04 2017 21:05
oh good point
Frank Lemanschik
@frank-dspeed
May 04 2017 21:05
works like a charm
thanks
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:06
:+1:
Frank Lemanschik
@frank-dspeed
May 04 2017 21:06
i come from the nodejs background
for me its often hard to think about all this browser complications
:D
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:07
the set and get definitions in can-define works like native setter and getter with two extra features:
Frank Lemanschik
@frank-dspeed
May 04 2017 21:07
because i coded so long time easy and simply what i wanted to code and it always worked :)
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:07
Asynchronous sets and gets by passing in a setting function to set and get as an extra param; and the ability to store a data value when setting that can later be retrieved by getting.
Frank Lemanschik
@frank-dspeed
May 04 2017 21:08
at present i am happy that i got 2 names functions working for get and set of the value
:D
its not the elegantest way but this way i know what its doing
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:08
An example of what I mean on the second part. Here's a setter in ES5:
{ set foo(val) { this.bar = val } }
but in can-define you can just return the value.
Julian
@pYr0x
May 04 2017 21:09
@bmomberger-bitovi so with the native getter / setter there is not evaluation if an inner prop is changed?
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:09
{ foo: { set: function(val) { return val; } } }
Frank Lemanschik
@frank-dspeed
May 04 2017 21:09
ya i did simply setVal: (val) => this.val = val
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:09
that's right. If you want to listen to specific inner props you should read them from the getter. They'll be picked up in the observation.
Frank Lemanschik
@frank-dspeed
May 04 2017 21:09
even more short
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:10
If you want to listen to every inner prop on a property value, serialize it in the getter
Frank Lemanschik
@frank-dspeed
May 04 2017 21:10
to much overhead i am under presure i have only 27 items that recive updates
i replace the whole object and re render
:D
i will later update that with more elegant methods
Julian
@pYr0x
May 04 2017 21:11
@bmomberger-bitovi thank for clarification
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:11
For @pYr0x I'll give an example. @frank-dspeed ignore this for now. :)
Here's how to do a last-updated timestamp for some inner properties:
import get from 'can-util/js/get/';
DefineMap.extend({
   foo: {},
   lastUpdated: {
     get: function() {
         get(this, "foo.bar");
         get(this, "foo.baz");
        get(this, "foo.quux");
        return Date.now();
    }
  }
});
Frank Lemanschik
@frank-dspeed
May 04 2017 21:14
a getter for every value?
of each object.key of foo?
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:15
It's reading those properties like this.foo.bar but doesn't throw an error if this.foo is undefined.
Frank Lemanschik
@frank-dspeed
May 04 2017 21:15
ya
so we can do a more generic function
that does that for each object key of foo
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:16
yes.
lastUpdated: { get: function() { this.foo.serialize(); return Date.now(); }
Frank Lemanschik
@frank-dspeed
May 04 2017 21:17
what means serialize?
thats a function that does that ?
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:17
Yes, it's part of DefineMap, and also the older can-map
Frank Lemanschik
@frank-dspeed
May 04 2017 21:17
but what i don't understand is
we don't return something from the get
we return a new date object
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:18
but that's something.
Frank Lemanschik
@frank-dspeed
May 04 2017 21:18
yes but why should we do get calls then?
what happens then?
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:18
also, Date.now() returns a number (milliseconds since the UNIX epoch)
Frank Lemanschik
@frank-dspeed
May 04 2017 21:18
normal i expect geting a value from a getter
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:18
What happens is that Observation.add is called for this.foo and those properties on this.foo
Julian
@pYr0x
May 04 2017 21:18
it is cached until the inner prop changed
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:18
It's part of the getters that can-define sets up
Frank Lemanschik
@frank-dspeed
May 04 2017 21:19
hmmm i am not realy a frind of this ideas at present
:D
Brad Momberger
@bmomberger-bitovi
May 04 2017 21:19
So when those properties change, internally there are events bound that update values that depend on them, like this lastUpdated stamp
That's why I said to ignore this for now. :)
Frank Lemanschik
@frank-dspeed
May 04 2017 21:19
but good to know it exists maybe i will some time realize what this is for
Julian
@pYr0x
May 04 2017 21:19
:D
Frank Lemanschik
@frank-dspeed
May 04 2017 21:20
till that time i will simply keep all things so small
one of my concepts is to small to fail ;)
counter part of a company that is to big to fail :D