These are chat archives for canjs/canjs

6th
Jun 2016
Fred Daoud
@foxdonut
Jun 06 2016 12:32
greetings!
We upgraded CanJS from 2.0.7 to 2.3.22 and also jquery 1.x to jquery 2.x. It seems as though something changed in the modifiers. The first time we call element.html(string), it's fine, but on subsequent calls, it doesn't render anything into the element.
If I "bypass" CanJS by calling element[0].innerHTML = string, it works, so the string itself is good.
migoeloe
@migoeloe
Jun 06 2016 12:36
Hey, can i use a recursive definition like this or will this cause problems?
    var Message = can.Model.extend(
        /** @static */
        {
        },

        /** @prototype */
        {
            define: {
                text: defines.string,
                author: defines.string,
                time: defines.date
            }
        }
    );
    Message.prototype.define.reactions = { Type: Message.List }
    return Message;
Fred Daoud
@foxdonut
Jun 06 2016 12:37
Further, if I comment out 'append' in the list of modifiers in the CanJS source, within define('can/view/modifiers/modifiers', ... can.each(['prepend'...]... convert(func), that also fixes the problem. Of course, that breaks other calls to append that rely on the "augmented" CanJS version, i.e. append(viewId, data).
Any ideas about this? @daffl perhaps? P.S. Hello again David, long time, I hope you're doing well! :)
Matthew Phillips
@matthewp
Jun 06 2016 13:19
@migoeloe I see no problem with doing that, I've done similar in projects before.
migoeloe
@migoeloe
Jun 06 2016 13:20
@matthewp thanks
Matthew Phillips
@matthewp
Jun 06 2016 13:21
@foxdonut Sorry to hear you're having problems. I don't know too much about modifiers to help. It's going to be deprecated though, how pervasive is your usage?
It might be better to instead import your template
and use it like:
var template = require("./template.stache");

$("#app").html(template(new can.Map()));
isadovskiy
@isadovskiy
Jun 06 2016 13:28
Hello guys. I'm wondering about template insertion into Component via <content> tag + can-autorender.
So basically in this example:
<div can-autorender> <my-greeting><h1>Hello There</h1></my-greeting></div>
The templated content - how it will be processed by component internally? As a document fragment; or it will be converted to dynamic template - to insert into target template via <content>?
Fred Daoud
@foxdonut
Jun 06 2016 13:31
@matthewp : I only actually use the modifiers in a couple of places, and I have no problem changing those to what you have indicated. I didn't know they were going to be deprecated -- good to know. thank you for your response! :+1:
isadovskiy
@isadovskiy
Jun 06 2016 14:05
The reason I'm asking is i'm looking for the way to wrap big pieces of the markup, generated on the server side, with the components to control them. Originally can.Control should be used for. But I'm just looking for the way to move from mixed approach (having both Controls and Components in my code) to Components-only dev approach. So I would like to replace Controls with auto-rendered Components, having all server-side generated markup wrapped inside component's tag and inserted via <content>
Now I'm wondering about performance. If wrapped HTML piece will be inserted as an Document Fragment into component's template - I believe it will work pretty quick
But in case wrapped html piece will be compiled to stache first and them executed to produce document fragment to insert as a content into component's template - it could be an issue. Since static document fragment will be compiled to dynamic template and then executed to produce my static html fragment back - it's pretty expensive to my mind
So I'm looking for inside information - how CanJS will handle the described case
Julian
@pYr0x
Jun 06 2016 16:28
@isadovskiy if you looked into can-autorender
you see that the content of a can-autorender tag will be a doc frag
called via renderer()
isadovskiy
@isadovskiy
Jun 06 2016 17:05
@pYr0x As I see, content is obtained as a raw string, which as later compiled by engine to renderer function (dynamic template)...
do not see document fragments..
returns a doc frag
Fred Daoud
@foxdonut
Jun 06 2016 17:58
What is the difference between .attr() and .serialize()?
Julian
@pYr0x
Jun 06 2016 17:59
i think, but i am not very sure, that with .attr() you dont get virutal properties
with serialize() i think you get all properties
Kevin Phillips
@phillipskevin
Jun 06 2016 17:59
yes, that’s right
Julian
@pYr0x
Jun 06 2016 17:59
thanks @phillipskevin ;)
Kevin Phillips
@phillipskevin
Jun 06 2016 18:00
attr() can also be used more generally as a setter/getter
serialize() is usually only used for sending data to the server
Fred Daoud
@foxdonut
Jun 06 2016 18:08
virtual properties?
Fred Daoud
@foxdonut
Jun 06 2016 18:11
I see.. thank you @phillipskevin @pYr0x :thumbsup:
Sunil George
@georgesunil81
Jun 06 2016 18:12
Hello Friends, so far the journey with CanJS has been greatly satisfying. Am working through new learnings, applying them and seeing tremendous results.
I am currently stuck in resolving an issue where the define getters are not getting called in a model!
Here is my model definition -

'define(['can/model/model'], function() {
var jobs = can.Model.extend({
getJobsList: function(params, success, error) {
return can.ajax({
type: 'GET',
url: '/job/All?' + params.queryString,
fixture: false
})
.then(success, error);
}

}, {
    define: {
        Status: {
            get: function() {              
           alert("gets in here for status value!");
                return "active";
            }
        },
        ExpiresIn: { 
            get: function() {
                alert("gets in here for expires-in value!");
                return 5;

            }
        },
    }
});
return jobs; 

});'

Oops, some issue with markdown, let me repaste

`define(["can/model/model"], function() {
var jobs = can.Model.extend({
getJobsList: function(params, success, error) {
return can.ajax({
type: "GET",
url: "/job/All?" + params.queryString,
fixture: false
})
.then(success, error);
}

}, {
    define: {
        Status: {
            get: function() {              
           alert("gets in here for status value!");
                return "active";
            }
        },
        ExpiresIn: { 
            get: function() {
                alert("gets in here for expires-in value!");
                return 5;

            }
        },
    }
});
return jobs; 

});`

Not sure what the issue is with the markdown there, but you get the gist.
I am using {{Status}} and {{ExpiresIn}} within my stache template, but nothing gets populated!
Even the alert messages are not showing up although the can.ajax call works and gets back data!
It seems that the Status and Expires in getters are not getting called!
What am I missing?
Kevin Phillips
@phillipskevin
Jun 06 2016 18:17
can you create a jsbin?
Sunil George
@georgesunil81
Jun 06 2016 18:17
Let me check...
Kevin Phillips
@phillipskevin
Jun 06 2016 18:17
oh
did you include the define plugin?
doesn’t look like it’s in your define([] at the top
Sunil George
@georgesunil81
Jun 06 2016 18:18
Ah, maybe not. How do I include it?
That must be the reason.
Kevin Phillips
@phillipskevin
Jun 06 2016 18:18
define(["can/model/model”, “can/map/define/define"], function() {
Sunil George
@georgesunil81
Jun 06 2016 18:18
However, I have another model that fetches from a fixture and there it works without explicitly including the define plugin!
Let me include the define plugin and rerun!
I included the define plugin, but still the getters are not getting called!
And, I am getting warnings from the stache -
can/view/stache/mustache_core.js: Unable to find key or helper "ExpiresIn".
can/view/stache/mustache_core.js: Unable to find key or helper "Status".
Kevin Phillips
@phillipskevin
Jun 06 2016 18:22
how are you using them in your template?
a jsbin would help if you can create one
there’s a link at the top of gitter than you can use to template the jsbin
Sunil George
@georgesunil81
Jun 06 2016 18:24
In the template, I am simply using {{Status}} and {{ExpiresIn}}
I thought, it would call those getters when it encounters the above curlies!
Kevin Phillips
@phillipskevin
Jun 06 2016 18:25
well… it would have to be an instance of you model
Sunil George
@georgesunil81
Jun 06 2016 18:26
correct, and the instance is getting created since the can.ajax is returning results!
Kevin Phillips
@phillipskevin
Jun 06 2016 18:26
can you display something from the ajax response?
Sunil George
@georgesunil81
Jun 06 2016 18:27
Yes, all of the data from the ajax response is getting displayed, but not the {{Status}} and {{ExpiresIn}}!
Kevin Phillips
@phillipskevin
Jun 06 2016 18:27
can you give an example of something you’re displaying from the ajax response?
Sunil George
@georgesunil81
Jun 06 2016 18:27
Sure, hold on...
`{{#eq _Status "Expired"}}
<td class="">{{title}}</td>
{{else}}
<td class=""><a href="{{url page='job' jobid=id status=status}}">{{title}}</a></td>
{{/eq}}'
{{#eq _Status "Expired"}} <td class="">{{title}}</td> {{else}} <td class=""><a href="{{url page='job' jobid=id status=status}}">{{title}}</a></td> {{/eq}}
Sorry, a typo there, in the #eq it is Status instead of _Status
So, the {{title}} gets displayed from the ajax response, but the Status getter is not getting called!
Kevin Phillips
@phillipskevin
Jun 06 2016 18:31
I can’t see why it wouldn’t work
so a jsbin would help
Sunil George
@georgesunil81
Jun 06 2016 18:32
Yeah, let me get one created and will let you know.
Thanks @phillipskevin for your help.
Fred Daoud
@foxdonut
Jun 06 2016 18:54
@matthewp after some more digging, the issue with [seemingly] the modifiers seems a result of something else, a mustache template with {{#mylist}}...{{/mylist}}, where mylist is a new MyModel.List and MyModel: can.Model.extend({...}). Now, A) if I change the data given to the mustache template from {mylist:mylist} to {mylist:mylist.serialize()}, it "fixes" the issue with the modifiers, but of course also I no longer have CanJS objects in my list, now only plain JS objects. If I B) keep {mylist:mylist} but change the template to {{#each mylist}}...{{/each}}, it also "fixes" the modifier issue, keeps my CanJS objects in the list, but now the list is rendered twice (??). I am rather stumped.
Any ideas would be much appreciated.
Thomas Sieverding
@Bajix
Jun 06 2016 20:42
Is there a way to pass raw Objects/Arrays into tags?
IE <node differential-size=“10, 10, 0”></node>
Julian
@pYr0x
Jun 06 2016 21:25
what about <node {differential-size}=“[10, 10, 0]”></node>
Thomas Sieverding
@Bajix
Jun 06 2016 22:00
It sets as a string instead of an array