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
Viktor Busko
@Lighttree
canjs/canjs#4100
Justin Meyer
@justinbmeyer
thanks
Viktor Busko
@Lighttree
np
henst922
@henst922
Hi! Is there something similar to this https://www.npmjs.com/package/react-router-modal to handle routing to a modal with canjs?
Justin Meyer
@justinbmeyer

@henst922 CanJS has a two-way routing system, so it wouldn't match specific urls. Though you can match certain state.

This JSBin shows how to create a generic modal: http://jsbin.com/misigo/edit?html,js,output

can.Component.extend({
    tag: "my-modal",
    view: `
          <div class='background'></div>
          <div class='modal-container'>
            <h3>{{title}}</h3>
            <div class='modal-contents'><content></content></div>
          </div>`
});
With CanJS, you would have something like:
{{#if( routeCurrent(page='todos') ) }}
  <my-modal title:raw="Wanna Save?">
      CONTENT FOR YOUR MODAL
  </my-modal>
{{/if}}
basically, if your route data's state matches page=todos ... it will render the modal
@henst922 canjs's routing system is quite a bit different from other routing systems. It's worth reading up on: https://canjs.com/doc/guides/technology-overview.html#Observablesandthebrowser_slocation
Eben
@eben-roux
@justinbmeyer : I'll put together a jsbin example just to ensure I'm not doing something odd. I want to use a method on my view model within a component that is rendered in an {{#each}}. I therefore need to get to the scope.root.mymethod as I understand. The component has to call the method that is bound by rendering the on:click to the method: something like:
{{#each(subObjects)}}
   <my-component click:from="scope.root.the-method-on-the-main-viewmodel" />
{{/each}}
Justin Meyer
@justinbmeyer
@eben-roux , so you are setting click on my-component's VM to that method
I think there might be a bug because I think that methods are supposed to be auto bound
Eben
@eben-roux
@justinbmeyer I think I missed the whole function binding boat :) --- having a look now on a jsbin
Justin Meyer
@justinbmeyer
I would call the click property something else. It's a bit confusing. Maybe clickCallback
This should work though:
<my-comp clickCallback:from="scope.root.method.bind(scope.root)">
it's possible that scope.root.X isn't being auto-bound. This happens in can-key-tree cc @phillipskevin
Eben
@eben-roux
so, my bad... just wasn't using it correctly by the looks of it
Kevin Phillips
@phillipskevin
not sure if you cleared this up correctly, but scope.root.X should get called with the correct context automatically
if you find a case where it isn't, it's a bug for sure
Eben
@eben-roux
wrapping one's head around all these levels of binding takes some practice --- it'll probably get easier with time
Justin Meyer
@justinbmeyer
can-stache-bindings_key.png
columns are:
binding example | direction of binding | value in the scope | pseudo code of what binding sets up
that's from this presentation: https://drive.google.com/open?id=0Bx-kNqf-wxZeYUJ3ZVRxUlU2MjQ .... it hasn't been updated for 4.0, but still covers the 3.0 bindings
Dovid Bleier
@dbleier
Hi All, having some issues with the new can4.0 value and using its listenTo method. In my test cases, works perfectly but in the actual app, the listenTo callback isn't getting called, although interestingly enough, the value method itself is
export const ViewModel = DefineMap.extend({
    units: {
        default: () => { return []; },
    },
    users: {
        value: function(prop) {
            prop.resolve({});
            prop.listenTo(prop.lastSet, prop.resolve);
            prop.listenTo('units', (target, newval, oldval) => {
                let organizeUnits = (users, user, sign, unit) => {
                        users[user] = users[user] || {};
                        users[user][sign] = users[user][sign] || [];
                        users[user][sign].push(unit);
                        return users;
                    },
                    users = newval.reduce((users, unit) => {
                        return organizeUnits(users, unit.user || 'unassigned',
                            unit.currentSign ? unit.currentSign.path : 'unassigned', unit.serialize());
                    }, {});
                prop.resolve(users);
            });
        }
    },
units is set by an outside component via stache scope bindings
so each time units is updated the users.value method is called, but the prop.listenTo('units', ...) is not
I could just move the code right into the value method, but that doesn't seem right
Justin Meyer
@justinbmeyer
@dbleier this is likely a source of confusion we've been seeing over and over
listenTo only fires when an event is fired
it isn't called with the initial value of units
well, judging by how you called resolve() initially, you might be aware of this
basically value() will be called either:
  • when someone reads an unbound users property, OR
  • the first time someone binds to users
We've been thinking of adding a onValue to complement listenTo
which does the same thing, but is called with the immediate value

I'm not totally sure you are miss-understanding how it's supposed to work.

so each time units is updated the users.value method is called, but the prop.listenTo('units', ...) is not

That makes me think something is wrong, that it's not a missunderstanding

is it possible that users isn't being bound between changes in units?
Justin Meyer
@justinbmeyer
if you do something like:
connectedCallback(){
  this.listenTo("users", function(){})
}
that should make sure users stays bound for the lifetime of your component
Dovid Bleier
@dbleier
@justinbmeyer yeah, it almost seems to me that the listenTo() is not finding the units property
where would I put and call the connectedCallback() you wrote?
Dovid Bleier
@dbleier
one more question, upon reflection
since user.value() gets called every time units changes, that means it's adding another listener on units each time, which if listenTo() would fire, would cause it to fire multiple times and perhaps lead to some sort of leak and performance degradation?
Justin Meyer
@justinbmeyer
@dbleier you there?
Dovid Bleier
@dbleier
yes
Justin Meyer
@justinbmeyer
ok, so lets see if we can get to the bottom of this ... :-)
Dovid Bleier
@dbleier
great thanks
Justin Meyer
@justinbmeyer
ok, so first put that connectedCallback in your ViewModel
Dovid Bleier
@dbleier
done