canjs/canjs

We CAN build the impossible! https://codepen.io/justinbmeyer/pen/yEGGoK

Frank Lemanschik

@frank-dspeed

so i can't do a lot about that i would need to understand stache parser probally

but i am sure its only a little thing but it needs to get found

as that worked befor relativ good

in 3.0

Frank Lemanschik

@frank-dspeed

some one has a idea how to fix this:

can-observation.js:255 Uncaught TypeError: Cannot read property 'valueDependencies' of undefined
    at Function.Observation.updateChildrenAndSelf (can-observation.js:255)
    at eval (can-observation.js:257)
    at Set.forEach (<anonymous>)
    at Function.Observation.updateChildrenAndSelf (can-observation.js:256)
    at Observation.get (can-observation.js:156)
    at Object.getValue (get-set.js:147)
    at Text.branchRenderer (mustache_core.js:329)
    at Text.HTMLSection.targetCallback (html_section.js:151)
    at hydrateCallbacks (can-view-target.js:254)
    at Object.hydrate (can-view-target.js:276)

i have a property editingCard that a set via a event = card

then the stache template has a if clause for if editingCard

it works well i am also using that exact same code and stuff in other components

when i now call removeEdit()

which does this.editingCard = null

this error happens

Frank Lemanschik

@frank-dspeed

i am wondering what value dependencys he is talking about and all this :(

Thomas Sieverding

@Bajix

Are there any resources for finding work specially using CanJS? I love using it, but thus far I’ve only had the privillege of using it in roles in which I’ve been the principal architect, and haven’t been successful in finding CanJS contract work

Frank Lemanschik

@frank-dspeed

CanJS Contract work good question

you would need to apply@bitovi i think justin is the CEO

you can apply also for me

Simply put in your message frank also wants work :sparkles:

Frank Lemanschik

@frank-dspeed

@chasenlehara maybe we should set the topic to https://jsbin.com/qumageb/edit?html,js,output

as the current channel topic here is broken because of usage of canjs 4 as it uses latest

Kevin Phillips

@phillipskevin

Thanks @frank-dspeed. It's updated now.

Aliaksei Yanachkin

@ScorpAL

Hi all.

Aliaksei Yanachkin

@ScorpAL

I have a route like /#!azlistpage with anchor links. By clicking on list item I should scroll to item with matched 'id' like a normal <a href="#a">A</a> <h1 id='a'> A</h1>. Is it possible?

Frank Lemanschik

@frank-dspeed

@ScorpAL scrolling to position at last is possible

Ranjan Subbiah

@ranjanbuilds

hey, I am using can-fixture and I was wondering how to avoid getting stringified responses. for example:

let statuses = {
            success: 1,
            statuses: "anything really, just testing!"
        }

        fixture({method: "get", url: "/json/internet/blah/blah/blah"}, function() {
          return statuses
        });

returns statuses as a string

Ranjan Subbiah

@ranjanbuilds

never mind, figured it out!

Viktor Busko

@Lighttree

Can someone explain visible difference between can observables and stream functionality ? LIke Kefir streams / toStream etc. What is possible with streams that isn't possible with observables ?

For example here: https://canjs.com/doc/guides/technical.html in section where redux-like approach described. There is point:
Having a single, ApplicationViewModel that contains all state, derived using can-define-stream from events dispatched on the ApplicationViewModel.
I cant understand why we need can-define-stream here ? Any observable will have change event as well.

like in 4.0 there is value stream added. But you could have same functionality in set before, isn't it ?

well...if your value was list pushing new items there didn't call set and with value it may be different, but still

Kevin Phillips

@phillipskevin

streams allow you to define a property based on the current value of other properties as well as the change events of other properties

an example we often give is the City/State picker on http://www.place-my-order.com/restaurants

City changes

to the selected city
to null when any change event happens with state

withOUT streams you had to use a setter on state in order to accomplish this

Viktor Busko

@Lighttree

So the benefit is in encapsulation of property behavior in one place right ?

Kevin Phillips

@phillipskevin

which means that there are 2 places in your DefineMap where city is defined:
https://github.com/donejs/place-my-order/blob/9775669f9a8378ff08607d50511d012d2f4b5418/src/restaurant/list/list.js#L18
https://github.com/donejs/place-my-order/blob/9775669f9a8378ff08607d50511d012d2f4b5418/src/restaurant/list/list.js#L30-L33

Right - putting all the logic for each property within its own property definition is a big improvement

this is a trivial example... but in larger apps, you can end up with the definition for a property in many places across many different files

it's really easy for this pattern to snowball into a huge problem that makes your code very difficult to change without breaking something else

Viktor Busko

@Lighttree

Ok thanks, I think I got the idea.

Kevin Phillips

@phillipskevin

streams are a good solution to any problem like this

but they're pretty hard to learn

the value behavior is a lot simpler and solves most of the same problems

Frank Lemanschik

@frank-dspeed

why do you think streams are hard to learn

they are a simple observe able

that emit values

Kevin Phillips

@phillipskevin

because I've tried to teach them to people

and people find them confusing

Frank Lemanschik

@frank-dspeed

hmmm i like teaching streams

i am at present preparing a biger series of streaming tutorials maybe your interrested in them will send you url once released

<form>
    <input class="x"> + <input class="y"> = <span class="result"></span>
</form>

Using most.js to make it reactive:

import { fromEvent, combine } from 'most'

const xInput = document.querySelector('input.x')
const yInput = document.querySelector('input.y')
const resultNode = document.querySelector('.result')

const add = (x, y) => x + y

const toNumber = e => Number(e.target.value)

const renderResult = result => {
    resultNode.textContent = result
}

export const main = () => {
    // x represents the current value of xInput
    const x = fromEvent('input', xInput).map(toNumber)

    // y represents the current value of yInput
    const y = fromEvent('input', yInput).map(toNumber)

    // result is the live current value of adding x and y
    const result = combine(add, x, y)

    // Observe the result value by rendering it to the resultNode
    result.observe(renderResult)
}

Where communities thrive

People

Repo info

Activity