These are chat archives for canjs/canjs

15th
Aug 2017
Viktor Busko
@Lighttree
Aug 15 2017 08:19

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.

Frank Lemanschik
@frank-dspeed
Aug 15 2017 08:21
hmmm there was a example for that
i think todoMVC
that adds todo on top
Viktor Busko
@Lighttree
Aug 15 2017 08:21
let me check
Frank Lemanschik
@frank-dspeed
Aug 15 2017 08:22
but i am wondering why you tigger realtime behavier in a save function=?
shouldn't that be called from a event system?
Viktor Busko
@Lighttree
Aug 15 2017 08:22
mmm...
Frank Lemanschik
@frank-dspeed
Aug 15 2017 08:22
like socket.io
i mean this should get called with entity even if thats created else where and not only in your frontend or i am wrong?
or even if this is not a distributed system you should maybe tigger it from a event emitter i think
did you know that a canDefineMap is a eventEmitter?
Viktor Busko
@Lighttree
Aug 15 2017 08:25
Give me a min to think about :)
Frank Lemanschik
@frank-dspeed
Aug 15 2017 08:26
ya sure all no problem i understand that this is much to learn and understand :)
Viktor Busko
@Lighttree
Aug 15 2017 08:29

I just based my solution on this example:

https://canjs.com/doc/can-connect/real-time/real-time.createInstance.html

as I got we have to call this createInstance right after our connection saved the instance. In my case this is not socket.io but normal ajax call based on url behavior.

or even if this is not a distributed system you should maybe trigger it from a event emitter i think
not sure that I understand the way how this should be organized.

did you know that a canDefineMap is a eventEmitter?
I know that we can call something like map.dispatch('customEvent', [data]), but not sure that I understand how this should improve the case.

Frank Lemanschik
@frank-dspeed
Aug 15 2017 08:31
then i don't understand why you need to use createInstance at all
its for getting called external
Viktor Busko
@Lighttree
Aug 15 2017 08:31
Mmmm this updates UI on the fly :)
so I just make save and UI updates with the new item in the list )
Frank Lemanschik
@frank-dspeed
Aug 15 2017 08:32
your case looks more like return new Entity(entity)
is what you want
it sounds like you designed something wrong :)
ah UI updates
i understand the normal way for this is diffrent i think but overall when it works let it work
but in general the ui should simply update when a value changes
because defineMaps are event emitters that dispatch events
create instance is a bridge
when a creation happens outside the ViewModel of the object
for example if you write a function that polls a server for changes
it can call this to add instances from server
but its not needed if your work in your frontend only
Viktor Busko
@Lighttree
Aug 15 2017 08:37

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
Aug 15 2017 08:40
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
Aug 15 2017 08:42

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
Aug 15 2017 08:43
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
Aug 15 2017 08:48
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
Aug 15 2017 08:50

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
Aug 15 2017 08:52
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
Aug 15 2017 08:56

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 ? )

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
Aug 15 2017 12:06
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
Aug 15 2017 12:08
@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
Aug 15 2017 16:03

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
Aug 15 2017 17:02
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
Aug 15 2017 17:08
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