These are chat archives for canjs/canjs

3rd
Jan 2017
Nico R.
@nriesco
Jan 03 2017 05:42

I’m trying to do something like this:

// viewmodel
export const ViewModel = Map.extend({
  define: {
    paymentPromise: {
      get: function() {
        return Payment.getList();
      }
    }
  },
  totalAmount: function() {
    var total = 0;
    this.paymentPromise.forEach(function(elem) {
      total += elem.amount;
    });
    return amount;
  }
});


// stache
{{#if paymentPromise.isResolved}}
  Total: {{totalAmount}}
  {{#each paymentPromise.value}}
    <div>Payment: {{amount}}</div>
  {{/each}}
{{/if}}

of course it didn’t work. Is there a way to iterate over the results of that promise (paymentPromise)?

Gira Minus
@gKreator
Jan 03 2017 05:55
On the getlist () add a .then ()
Look at session:
Nico R.
@nriesco
Jan 03 2017 06:51
@gKreator thanks, adding .then seems to help
I’m using a code like this:
// viewmodel
export const ViewModel = Map.extend({
  define: {
    paymentPromise: {
      get: function() {
        return Payment.getList();
      }
    },
    paymentValue: {
      get: function() {
        return Payment.getList().then(function(data) {
          var total = 0;
          data.forEach(function(elem) {
            total += elem.amount;
          });
          this.attr('totalAmount2', total);
          // return amount;
        });
      }
    }
  },
  totalAmount: function() {
    var total = 0;
    this.paymentPromise.forEach(function(elem) {
      total += elem.amount;
    });
    return amount;
  }
});


// stache
{{#if paymentPromise.isResolved}}
  Total: {{totalAmount2}}
  {{#each paymentPromise.value}}
    <div>Payment: {{amount}}</div>
  {{/each}}
{{/if}}
it works but I need to set another property totalAmount2, is this the correct approach? it becomes hard to test as I’m not returning a value and just setting an attribute
Gira Minus
@gKreator
Jan 03 2017 06:58
Im on my phone so i cant type too much but
totalAmount:
Should be a value:
And move your paymentValue logic to ur payment promise block
So that you would have one ajax call setting a variable
Nico R.
@nriesco
Jan 03 2017 07:32
the code I sent does not work..
Gira Minus
@gKreator
Jan 03 2017 07:34
Just look at the bitballs code example i sent earlier
Nico R.
@nriesco
Jan 03 2017 07:39
I tried but didn’t work with value. Using get works but the problem is that it won’t update values afterwards, so even while I’m reading from this.attr(‘myProperty’) if myProperty changes no update is shown
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jan 03 2017 08:45
@nriesco you are using can2?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jan 03 2017 08:51
if you use .then the promise will be resolved so {{#if paymentPromise.isResolved}}.......{{/if}} is not necessary, I think this will work:
export const ViewModel = Map.extend({
  define: {
    paymentPromise: {
     value: function() {
        return Payment.getList();
      }
    }
  },
  totalAmount: function() {
    var total = 0;
    this.paymentPromise.forEach(function(elem) {
      total += elem.amount;
    });
    return amount;
  }
});
use value as function instead of get
Frank Lemanschik
@frank-dspeed
Jan 03 2017 10:21
Cherif do you got expirence with creating and subscribing to streams from can-define-stream?
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jan 03 2017 10:52
@frank-dspeed not yet but I will try them in the few coming days
Nico R.
@nriesco
Jan 03 2017 12:22
@cherifGsoul I'm using can 2.x and donejs. I'll try your code but I think It didn't work before. I'll keep you posted
Nico R.
@nriesco
Jan 03 2017 12:53
@cherifGsoul it only works with get, using value makes things worse.
@cherifGsoul using this.myPromise generated an error, also this.myPromise.then…
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jan 03 2017 12:53
@nriesco ok let me review your code above
@nriesco so your are using can.connect?
not can.Model
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jan 03 2017 13:10
@nriesco Why you need promise, something more simple should work
export const ViewModel = Map.extend({
  define: {
    paymentList : {
     Value: Payment.List
    }
  totalAmount:  {
   get: function() {
     //computation logic here
   }
  }
});
@nriesco just pass the list constructor to Value https://v2.canjs.com/docs/can.Map.prototype.define.ValueConstructor.html
Mohamed Cherif Bouchelaghem
@cherifGsoul
Jan 03 2017 13:18
@nriesco with can.Map of can2 you read attributes with this.attr('paymentList') and you write with this.attr('mayProp', 'value)
Adam L Barrett
@BigAB
Jan 03 2017 21:21

In the events object of a component, if I only wanted to get the immediate child form element of the component with the selector, does this work?:

events: {
  '> form submit'(el, ev) {
    ev.preventDefault();
  }
}

...Is the component implied there, will only direct child form elements have their events preventDefault() called?

Gira Minus
@gKreator
Jan 03 2017 21:39
@BigAB It should work, I think canjs works with jquery selectors... but honestly you should use http://canjs.com/doc/can-stache-bindings.event.html
Kevin Phillips
@phillipskevin
Jan 03 2017 21:39
@BigAB I don’t think you can use > with event delegation
Gira Minus
@gKreator
Jan 03 2017 21:40
<form ($submit)="myFunction( %element, %event )">
Adam L Barrett
@BigAB
Jan 03 2017 22:30
@phillipskevin sure you can, in general.
@gKreator I like to keep my viewmodel clean of any DOM specific code, so until stache has a way to call prevent default from the stache template, I like to use the events object for these kinds of DOM related things
...anyway, it seemed to work, so I am going with it. Thanks for the help though!
Kevin Phillips
@phillipskevin
Jan 03 2017 22:36
it did work?
did I do something wrong when I tried it out? http://jsbin.com/pixobibuve/1/edit?js,console,output
Gira Minus
@gKreator
Jan 03 2017 23:48
@BigAB Yeah I know that feeling. Let us know what worked. Thanks!
Adam L Barrett
@BigAB
Jan 03 2017 23:54
@phillipskevin I think you did nothing wrong, I got different results with an older, jquery-ified version of can
https://jsbin.com/dehitu/edit?html,js,console,output
Kevin Phillips
@phillipskevin
Jan 03 2017 23:56
interesting