These are chat archives for canjs/canjs

15th
Aug 2016
xedos
@xedoken
Aug 15 2016 05:06
Hi! One question:
Can i use canjs without stache/mustache templates? i want integrate canjs to symfony2 framework with twig templates. can i do that?
Julian
@pYr0x
Aug 15 2016 08:48
is there a twig JS template engine out there?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 15 2016 09:03
yes you can use canjs with twig
For inline templates:
<script type="text/stache" id="mytpl">
{% raw %}
your stache/mustache string
 {% endraw %}
</script>
the raw block tells twig to ignore that part
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 15 2016 09:09
starting from twig 1.12 the raw tag was changed to varbatim http://twig.sensiolabs.org/doc/tags/verbatim.html
Julian
@pYr0x
Aug 15 2016 09:11
@cherifGsoul but you have to use stache inside the twig template... i thought he wants to replace stache with twig
?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 15 2016 09:13
I dont think he can, maybe he needs to integrate swig (port of twig for js) in canjs
I think even swig is not maintained now
Julian
@pYr0x
Aug 15 2016 09:16
ok
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 15 2016 09:20
with PHP I used this alternative syntaxe with can-autorender plugin:
<div type='text/stache' can-autorender message="Hi">
    {{message}}!
  </div>
Julian
@pYr0x
Aug 15 2016 09:22
why not use steal to load the stache files?
and append them to the DOM
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 15 2016 09:25
I used it mainly to render the components tag for example:
<div type='text/stache' can-autorender>
<ui-rater  min="0" max="5"/>
</div>
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 15 2016 09:30
@pYr0x do you have better way with steal to do it?
Julian
@pYr0x
Aug 15 2016 09:33
canjs/can-component#10
matthew did something great
but it is not final
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 15 2016 09:39
nice work
Sunil George
@georgesunil81
Aug 15 2016 15:34
A quick question - what is the best way to load the Stache in the component template. Is the below a valid way to do it?
define([
    'can',
    'app/components/Search/SearchView.stache',
], function(can, SearchView) {

    can.Component.extend({

        tag: 'ax-search',

        template: can.view(SearchView),

    ...
}
With the above syntax, I have an issue where a can.view.attr is not getting triggered. Though it works when I have the full path to the stache in the template property instead of using SearchView!
Anyone have any inputs? Thanks.
Julian
@pYr0x
Aug 15 2016 15:48
why not using
import template from './<%= name %>.stache!';
Eben
@eben-roux
Aug 15 2016 15:52
@Sunil: still learning myself but if you use the ! at the end would you then have the template already and not call can.view(SearchView)? --- so template: SearchView when using !
Sunil George
@georgesunil81
Aug 15 2016 16:02
Thanks @pYr0x @eben-roux , it looks like ! has a meaning with the stache import. I will try that and let you know.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 15 2016 16:04
@georgesunil81 @eben-roux I dont know if "!" still required when you use steal to have a renderer
Sunil George
@georgesunil81
Aug 15 2016 16:05
@cherifGsoul I tried ! but it did not do anything different for me.
can.view.attr is still not getting triggered!
If I do the below -
template: can.view(app/components/Search/SearchView.stache),
it triggers my can.view.attr as expected.
So, I was thinking what could be the issue here?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 15 2016 16:07
@georgesunil81 do you use steal?
Sunil George
@georgesunil81
Aug 15 2016 16:07
Yes @cherifGsoul I am using steal
I want to use the below syntax so that I can bundle my stache with the component
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 15 2016 16:08
SearchView should be a renderer
you can get rid of can.view invokation
Sunil George
@georgesunil81
Aug 15 2016 16:08
template: can.view(SearchView)
,
Oh, @cherifGsoul, could you elaborate. I am not aware of the renderer.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 15 2016 16:09
template: SearchView
Sunil George
@georgesunil81
Aug 15 2016 16:09
Ah!, let me try that.
@cherifGsoul , this is what I have now -
define([
    'can',
    'app/components/Search/SearchView.stache',
], function(can, SearchView) {

    can.Component.extend({

        tag: 'ax-search',

        template: SearchView,

    ...
}
But, that did not help. The above syntax fails to invoke can.view.attr
But, the below does -
define([
    'can'    
], function(can) {

    can.Component.extend({

        tag: 'ax-search',

        template: 'app/components/Search/SearchView.stache',

    ...
}
I have no idea as of now, why the renderer format would not work.
Please let me know if you guys spot anything I may be doing wrong!
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 15 2016 16:13
I have never tried AMD modules with steal
let me try
Sunil George
@georgesunil81
Aug 15 2016 16:15
Thanks @cherifGsoul
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 15 2016 16:35
@georgesunil81 I made a quick example it works fine:
define(['can','./login.stache'],function(can,loginStache){
  can.Component({
    tag: 'ui-login',
    template: loginStache
  });
});
Sunil George
@georgesunil81
Aug 15 2016 16:39
@cherifGsoul, thanks for checking it out. I must be missing something at my end with the can.view.attr not getting invoked with the renderer syntax. Thanks for all your help.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Aug 15 2016 16:40
I think you should check your template
SearchView.stache
maybe you call an attribute who dosent exist in your viewModel
Sunil George
@georgesunil81
Aug 15 2016 16:48
Hmm @cherifGsoul . Thats a good hint. I will check it out. Will report back.
Eben
@eben-roux
Aug 15 2016 17:00
define([
    'can',
    'app/components/Search/SearchView.stache!',
], function(can, SearchView) {

    can.Component.extend({

        tag: 'ax-search',

        template: SearchView, // have you tried with the ! and this format (what I alluded to earlier)

    ...
}
Julian
@pYr0x
Aug 15 2016 17:16
! Is not needed
you can get rid pof the ! It is not needed in with stache , css , less or other
the only thing it is needed it package.json!npm
because the extenstion is json and the plugin is called nom
npm
Eben
@eben-roux
Aug 15 2016 17:33
nom nom :) --- is this new Julian, or where did the ! come from and now go to?
2.3 vs 3.0?
or is it a steal thingy?
Julian
@pYr0x
Aug 15 2016 18:12
It is a steal thing
Sunil George
@georgesunil81
Aug 15 2016 18:23
Thanks @pYr0x and @eben-roux for weighing in. I got rid of ! since I am using stealjs. Thanks.
Sunil George
@georgesunil81
Aug 15 2016 18:57
Can I update the stache view generated by a prior controller (can.control) within the current controller? Say I generate a header menu using "menu" controller and I would like to update the menu within my "body" controller, is that possible?
Julian
@pYr0x
Aug 15 2016 19:15
sorry dont understand
Sunil George
@georgesunil81
Aug 15 2016 21:03
@pYr0x sorry for the delay in reply, was in a meeting. I have a sidenav menu in my application that is rendered via stache by a controller (can.control) that I destroy after it runs. I then run my content controller (can.control) that needs to update the sidenav created by the earlier controller that got destroyed. Was trying to see if that is possible to do.