Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Oct 18 22:20
    greenkeeper[bot] labeled #5391
  • Oct 18 22:20
    greenkeeper[bot] opened #5391
  • Oct 18 22:20

    greenkeeper[bot] on can-observable-mixin-1.0.3

    fix(package): update can-observ… (compare)

  • Oct 18 19:08
    cherifGsoul labeled #5390
  • Oct 18 19:07
    cherifGsoul opened #5390
  • Oct 18 18:45
    greenkeeper[bot] labeled #5389
  • Oct 18 18:45
    greenkeeper[bot] opened #5389
  • Oct 18 18:45

    greenkeeper[bot] on can-observable-bindings-1.3.0

    fix(package): update can-observ… (compare)

  • Oct 18 18:29

    matthewp on master

    Update dist for release (compare)

  • Oct 18 18:29

    matthewp on v6.1.3

    Update dist for release 6.1.3 (compare)

  • Oct 18 17:59

    matthewp on can-observable-array-1.0.2

    (compare)

  • Oct 18 17:59

    matthewp on master

    fix(package): update can-observ… Merge pull request #5388 from c… (compare)

  • Oct 18 17:59
    matthewp closed #5388
  • Oct 18 16:46
    greenkeeper[bot] labeled #5388
  • Oct 18 16:46
    greenkeeper[bot] opened #5388
  • Oct 18 16:46

    greenkeeper[bot] on can-observable-array-1.0.2

    fix(package): update can-observ… (compare)

  • Oct 18 12:45
    greenkeeper[bot] labeled #5387
  • Oct 18 12:45
    greenkeeper[bot] opened #5387
  • Oct 18 12:45

    greenkeeper[bot] on can-stache-element-1.0.2

    fix(package): update can-stache… (compare)

  • Oct 18 09:49
    chasenlehara edited #5384
Frank Lemanschik
@frank-dspeed
<can-dynamic-import from="MODULE_NAME" value:to="*MODULE_REF"/>
Dynamically import a module from within a can-stache template. Since there is no subtemplate to attach the Promise to as the current scope, you must export the Promise's resolved value to the template's refs scope using value:to.
so you code a module like
module.exports = { data: '' }+
and import that
Devendra Singh
@devs4522
Hi There..
I am currently working on web application which is developed using canjs. Now i want to integrate an angular component (for example header component) in canjs application. Is it technically possible ? Any help is much appreciated.
Devendra Singh
@devs4522
@marshallswain Can you please help me in this ?
Chasen Le Hara
@chasenlehara
@devs4522 It should be doable. Have you run into any specific issues yet?
Devendra Singh
@devs4522
I am in the initial phase of this task. Not sure where to start that's why looking for some one's advice how to go for this. Have you ever tried ?
@chasenlehara
Frank Lemanschik
@frank-dspeed
@devs4522 ok i will help you
first you need to create something
for example a canjs app
then you put your angular <app-block>
inside or outside the canjs template stuff
then you import and init angular
if that errors you put that angular init into the connectedCallback of the related canjs component
or you do it via a setTimeout
it depends a lot on how much of the dom is controled by canjs
for example you could have some basic html with a little canjs widget and a total other part of html for angular
if the angular widget is inside the canjs widget you need connected callback or setTimeout
you can also use the on:inserted dom event
if you put the angular component dynamic into the dom
Frank Lemanschik
@frank-dspeed
here i prepared a codepen mixup for you with a canjs and a angular app
Chasen Le Hara
@chasenlehara
@devs4522 Which versions of Angular and CanJS?
Like Frank said, connectedCallback (in CanJS 4 & 5) or the inserted event (<= CanJS 3) will be your friend. You can probably have the Angular template in a stache file, then start Angular’s initialization process in either connectedCallback or the inserted event.
Devendra Singh
@devs4522
@chasenlehara My canjs application is using <=3 canjs version and angular 4. Thanks for your help. These info are really helpful for me to kickstart my work.
@frank-dspeed Thanks a lot for your detailed info and codepen demo. i will start with this and will disturb you again in case of any issue :)
kostya.aderiho
@kaderiho

Hi guys, I faced with issue when I share my component's method through the @ binding, that method is called 3 times when I came to the page where this component holds. May be someone knows why it may happens?

Thanks in advance

Gregg Roemhildt
@roemhildtg
Set a break point in that function and see what's calling it in the stack?
HypnoticApe3
@HypnoticApe3
hey, just stopping by to ask a question about implementing a html code into a canjs code that is part of big Commerce . Anyone here think they can help me out?
Mohamed Cherif Bouchelaghem
@cherifGsoul
@HypnoticApe3 can-stache is HTML renderer
HypnoticApe3
@HypnoticApe3
Sorry, i worded incorrectly. I mean, can someone help me implement a code i wrote in html 5 to work on a theme that is written in canjs.

products:
new:
limit: {{theme_settings.homepage_new_products_count}}
featured:
limit: {{theme_settings.homepage_featured_products_count}}
top_sellers:
limit: {{theme_settings.homepage_top_products_count}}
carousel: {{theme_settings.homepage_show_carousel}}
blog:
recent_posts:
limit: {{theme_settings.homepage_blog_posts_count}}


{{#partial "hero"}}
{{#if carousel}}
{{> components/carousel arrows=theme_settings.homepage_show_carousel_arrows}}
{{/if}}
{{{snippet 'home_content'}}}
{{/partial}}

{{#partial "page"}}

{{#each shipping_messages}}
    {{> components/common/alert-info message}}
{{/each}}

<div class="main full">
{{#if products.featured}}
{{> components/products/featured products=products.featured columns=theme_settings.homepage_featured_products_column_count}}
{{/if}}

{{#if products.top_sellers}}
{{> components/products/top products=products.top_sellers columns=theme_settings.homepage_top_products_column_count}}
{{/if}}

{{#if products.new}}
{{> components/products/new products=products.new columns=theme_settings.homepage_new_products_column_count}}
{{/if}}
</div>

{{/partial}}
{{> layout/base}}


<html>

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js">

  </script>

  <script>

$(function() {
var overlay = $('<div id="overlay"></div>');

$(".flip-card").hide();
overlay.show();
overlay.appendTo(document.body);
$(".popup").show();
$(".buttonClose").click(function() {
$(".popup").hide();
overlay.appendTo(document.body).remove();
return false;
});
$(".closeX").click(function() {
$(".popup").hide();
overlay.appendTo(document.body).remove();
return false;
});
$(".button").click(function() {
$(".flip-card").show();
return false;
});
});

</script>

<body>

<div class='popup'>
<div class='cnt223'>
<p>
<img class="highLevelLight" src="https://i.imgur.com/G9WK4BN.png">
<img class="highLevelLight" src="https://i.imgur.com/cvgUoNd.png">
<img class="lowLevelLight" src="https://i.imgur.com/FhB0RB2.png">
<img class="crystalLight" src="https://i.imgur.com/WAMpM7g.png">
<img class="zoltar" src="https://i.imgur.com/KxoUG8F.png" width="300px">
<div>

<p>
<div>
<button class="button">Get your fortune!</button>
<button class="buttonClose">No, thank you.</button>
<div>

<div class="flip-card">
<div class="flip-card-inner" onclick="this.classList.toggle('flipped-card')">
<div class="flip-card-front">
<img class="zoltarCard" src="https://i.imgur.com/kcLRyZu.jpg">

</div>

<div class="flip-card-back">

<img class="zoltarCardBack" src="https://i.imgur.com/s3VWFnE.png ">
<div class="closeX">X</div>
</div>
</div>

</body>

            <style>

overlay {

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 0;
display: none;
}
.cnt223 a {
text-decoration: none;
}
.popup {
width: 100%;
margin: auto;
display: none;
z-index: 100;
}
.cnt223 {
width: 70px;
height: 100%;
margin: auto;
background: #0000;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p {
clear: both;
color: #555555;
/ text-align: justify; /
font-size: 20px;
font-family: sans-serif;
display: block;
margin-left: auto;
margin-right: auto;
}
.cnt223 p a {
color: #d91900;
font-weight: bold;
}
.cnt223 .x {
float: right;
height: 35px;
left: 22px;
position: fixed;
top: -25px;
width: 34px;
}
.cn

Mohamed Cherif Bouchelaghem
@cherifGsoul
@HypnoticApe3 can you put it in a codepen or a gist please?
HypnoticApe3
@HypnoticApe3
when i hit preview, the pop-up code i wrote executes but the canjs code doesn't. I'm not sure where to input the pop-up code to where it doesn't stop the canjs.
yeah, i felt posting the code was a bad idea but i already hit enter.
Mohamed Cherif Bouchelaghem
@cherifGsoul
No problem,
HypnoticApe3
@HypnoticApe3
this is just the pop-up code. The other code is part of the theme build on big commerce
which is the top half.
that i posted above.
Mohamed Cherif Bouchelaghem
@cherifGsoul
Does this code work?
HypnoticApe3
@HypnoticApe3
yeah.
Mohamed Cherif Bouchelaghem
@cherifGsoul
this is just for rendering the popup?
@HypnoticApe3 Ah the buttons are in the bottom
HypnoticApe3
@HypnoticApe3
The html5 part is the pop-up. the canjs is for grabbing information to fill up a product column on the home page of the site. when I run it as written above, the pop-up works (give or take a few misplacement) but it completely neglects the canjs code
Mohamed Cherif Bouchelaghem
@cherifGsoul
Where is the canjs code?
HypnoticApe3
@HypnoticApe3
the first part of the code I posted above.
Mohamed Cherif Bouchelaghem
@cherifGsoul
can you put the full not working code in the codepen?