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

MMmmm ok I'll try to clarify the case, because I showed you just one function :)

I have 1 component that renders list of entitiy
I have another component that adds new items in this list. But this is separate component, so I have to make "something" to update the list in another component.
And real-time with createInstance do the work :) Well...not sure that this is correct way.

I had no expectations that entity adder component will update list in another component, because it knows nothing about it. It just makes POST request using connection
But maybe I'm missing something...not sure
Frank Lemanschik
@frank-dspeed
Entity Model
should have Entity.list
a instance store most time made via canDefineList
so when ever you create a Entity with some values it adds that instance to its Enitity.list i think
:D
i think this is used in all guides look at it
Viktor Busko
@Lighttree

yes I have entity model like this:

import DefineMap from 'can-define/map/map';
import DefineList from 'can-define/list/list';
import set from 'can-set';
import connect from 'can-connect';
import parse from 'can-connect/data/parse/parse';
import realTime from 'can-connect/real-time/real-time';
import constructor from 'can-connect/constructor/constructor';
import constructorStore from 'can-connect/constructor/store/store';
import canMap from 'can-connect/can/map/map';
import memoryCache from 'can-connect/data/memory-cache/memory-cache';
import authBehavior from './authBehavior';
import Person from './person.model';
import fallThroughCache from './fall-through-cache-custom';

const cacheConnection = connect([
    memoryCache
], {
    name: 'entity'
});

const entity = DefineMap.extend({
    activityType: 'string',
    clientId: 'number',
    id: 'number',
    creatorId: 'number',
    message: 'string',
    created: 'number',
    managerId: 'number',
    employeeId: 'number',
    externalId: 'number',
    readEmployee: 'boolean',
    readManager: 'boolean',
    title: 'string'

});

const algebra = new set.Algebra(
    set.props.id('id')
);

entity.List = DefineList.extend({
    '#': entity
});

entity.connection = connect(
    [realTime, authBehavior, parse, fallThroughCache, constructor, constructorStore, canMap], {
        url: 'v1/entity',
        Map: entity,
        List: entity.List,
        name: 'entity',
        parseListData(response) {
            return { data: response };
        },
        parseInstanceData(responseData) {
            return responseData.entityVO;
        },
        algebra,
        cacheConnection
    });

export default entity;

But it didn't refreshed UI untill I refresh the page.. so I was thinking that real-time is something that I have to use. But now I'm confused and not sure :D

Frank Lemanschik
@frank-dspeed
there it is List
no the list gets updated by getter and setter most time
you bind a value in stache to a getter setter
and when ever something changes
this will get updated on the screen
so DefineMap is simply a eventEmitter
and emits events on get and set to stache
:D
hope that makes sense
for example you can make a value that returns a setInterval that sets a value on the viewModel like this.myVal = 2+x
then this will get reflected if you bind myVal
in stache
this way you can make nice count downs by the way
:D
Frank Lemanschik
@frank-dspeed
so remember your view should always get updated via the viewModel it self without a connection
the connection is only to add stuff from outside like a server or other eventEmitter
so if you use 2 diffrent models 2x defineMap for example
you can simply set model 1 as property of value 2
no need for a extra function
Viktor Busko
@Lighttree

Well I know this that you can bind and observable values will be updated etc...

The problem that when you send data to the sever it didn't updated the list with new data (and UI obviously) without some additional logic . Maybe I missed something here:

import Component from 'can-component';
import DefineMap from 'can-define/map/map';
import enitty from './../../models/enitty.model';
import view from './enitty-list.stache';
import './enitty-list.scss';
import './enitty.svg';
import './checkin-card';

export const ViewModel = DefineMap.extend({
    owner: '*',
    currentPersonPromise: '*',
    enittyListPromise: {
        get() {
            return enitty.getList({
                employeeId: this.owner.id
            });
        }
    },
    enittyList: {
        Type: [enitty],
        get(lastSet, resolve) {
            this.enittyListPromise.then(resolve);
        }
    },
    isCurrentUserOwner: 'boolean'
});

export default Component.extend({
    tag: 'gf-enitty-list',
    ViewModel
});

But with real-time it works at least :)

Frank Lemanschik
@frank-dspeed
it looks good for me and i understand your problem
it don't updates because its not informed that the server updates
and the new value gets set no where on the viewModel
Viktor Busko
@Lighttree

it don't updates because its not informed that the server updates
and the new value gets set no where on the viewModel

Not sure... is this normal behavior or I'm doing wrong ? )

Frank Lemanschik
@frank-dspeed
i think this will enlighten you a lot
:D

Instance Callbacks

.createdInstance(instance, props) - Called whenever an instance is created.
.updatedInstance(instance, props) - Called whenever an instance is updated.
.destroyedInstance(instance, props) - Called whenever an instance is destroyed.
.updatedList(list, updatedListData, set) - Called whenever a list has been updated.

Implemented by constructor/constructor behavior.

Overwritten by real-time and constructor/callbacks-once behaviors.

Viktor Busko
@Lighttree
Sorry for so many questions, but how these callbacks supposed to work ? I can't see any example and not sure that I understand approach. I was thinking that they are for internal usage or so.
AntonProkofyev
@AntonProkofyev
@frank-dspeed and why realtime behavior is't ok for this? from docs it should do the thing
Overwrites the "data callback" methods and provides createInstance, updateInstance, and destroyInstance methods that update lists to include or exclude a created, updated, or destroyed instance.
Viktor Busko
@Lighttree

Guys correct me if I'm wrong. I need to add items to the list, and on UI it should appear at the top of the list (currently it adds to bottom and this is expected).
I'm using real-time behavior so can.js understands when to add by itself:

save() {
        this.entity.save((entity) => {
            Entity.connection.createInstance(entity);
        });
 },

What the correct way to tell it to add to very top of the list ? custom sort function in component when my list changes ?
There is also https://canjs.com/doc/can-set.props.sort.html but not sure that my case is correct for this, because as I got this designed to understand where we need to insert item, but I know this.

If someone interested after couple of hours of debugging can-set, set-add, real-time etc.
I figured out that I had to write this in list getter (orderBy added with created that represents creation time in my map):

get() {
            return Entity.getList({
                employeeId: this.owner.id,
                orderBy: 'created desc'
            });
        }

and update algebra like this:

const algebra = new set.Algebra(
    set.props.id('id'),
    set.props.sort('orderBy')
);

this wasn't obvious :)

Marc Godard
@MarcGodard
Hi Guys, getting this warning in my console a lot WARN: unknown attribute binding {(rows)}. Is can-stache-bindings imported? for many things... not sure why, but it might be causing some other issues... any ideas?
Kevin Phillips
@phillipskevin
Is can-stache-bindings imported?
also, @MarcGodard if you can run npm ls --depth=0 that would help to figure out what's going on
you can send it to me privately if the output is really long
Viktor Busko
@Lighttree
guys, is there ability to update bindings not on "change" but on other events to avoid this type of handling:
<input {($value)}="entity.title" ($input)="titleHandler(%element.value)" placeholder="Enter a title" type="text"/>
This titleHandler just doing:
titleHandler(title) {
        this.entity.title = title;
}
Jeroen Cornelissen
@jeroencornelissen
@Lighttree what other events do you mean?
You could use ($blur)=“…"
Viktor Busko
@Lighttree
the idea is to make such binding {($value)}="entity.title" work not on change but on input