Observables returned by helpers should be read

[phillipskevin]

If an observable is on the viewModel, stache calls getValue on it. If it is returned by a helper, stache tries to stringify it.

Here is an example:

import { Component, stache, SimpleObservable } from "can";

stache.addHelper("asyncText", () => {
    const text = new SimpleObservable("initial value");

    setTimeout(() => {
        text.set("new value");
    }, 3000);

    return text;
});

Component.extend({
    tag: "my-app",
    view: `
    <p alt="{{ asyncText() }}">{{ asyncText() }}</p>
    <p alt="{{ asyncVal }}">{{ asyncVal }}</p>
  `,

    ViewModel: {
        asyncVal: {
            default() {
                const text = new SimpleObservable("initial value");

                setTimeout(() => {
                    text.set("new value");
                }, 3000);

                return text;
            }
        }
    }
});

The paragraph using the helper renders: <p alt="[object Object]">[object Object]</p> The paragraph using the viewModel value renders: <p alt="new value">new value</p>

[phillipskevin]

This was reported here: https://gitter.im/canjs/canjs?at=5b8fbf4aac25fd11b5e408ef and then continued here: https://gitter.im/canjs/canjs?at=5b90dfb5f5402f32aae63c4d

[justinbmeyer]

This might need to be fixed in can-frag which I think is what takes the result of a helper and tries to prepare it for being inserted in the page.

[justinbmeyer]

Does:

stache.addHelper("asyncText", () => {
    const text = new SimpleObservable("initial value");

    setTimeout(() => {
        text.set("new value");
    }, 3000);

    return text.value;
});

work?

[phillipskevin]

Returning text.value makes the initial value work, but it is not updated when text.set is called.

[phillipskevin]

Here is a codepen: https://codepen.io/kphillips86/pen/XPeaEo?editors=0010