Why is from-view used here?

Help Requests
1

Hi, I’m completely new, not only to Aurelia but to this type of framework in general (never worked with Angular, React, Next, etc. either). So there’s a lot to wrap my head around and I’m probably going to be asking some noob questions, starting with this one:

I’m, currently looking at the “Building a widget-based dashboard” example and there is something in the code there that doesn’t make sense to me:

<div class="component dog-component" promise.bind="fetchDog()">
    <template pending>Fetching doggo...</template>
    <template then.from-view="dog">
        <img src.bind="dog.url" loading="lazy">
    </template>
    <template catch.from-view="err">
        <p>${err}</p>
    </template>
</div>

To put it into context: the view-model is using a promise to fetch info from an API, and the view will obviously respond accordingly.

So why is the template using then.from-view? Surely the information is fetched by the view model, not the view, and so the data should be sent to the view and not from it?

Thanks!

2

a1.from-view=a2 means the value will flow from a1 (target) to the source via the expression a2

So in your example above, whatever the value then wants to propagate will be go from (view) then to the source (component view model) via the expression dog (which means property dog on the component)

Binding can be understood as a bridge to connect source and target. Sources are usually component view models, while targets could be many things:

  • a child custom element component view model, or
  • a child custom attribute component view model, or
  • an ordinary HTML element

Back to the promise example, a good way to think about it is to use the way we write promise code in JavaScript:

class MyClass {
  doThing() {
    somePromise
      .then(dog => {
        img.url = dog;
      })
      .catch(err => {
        p.textContent = err;
      })
  }

The html in your example can be understood quite similarly like the above JS promise code.

1 Like
3

I wouldn’t worry about that, I was similarly confused when I read your post. It doesn’t make intuitive sense, I don’t think, that the promise / then / catch are properties of the view but I think I understand why that’s the case.

I imagine I’ll refer back to this post many, many times.

4

Just a note that the documentation has been updated. You dont need from-view to use promise, you can just use then/catch like JS. The from-view command was needed because we had an issue with our syntax interpreter, its fixed awhile ago but the doc wasnt updated for the simpler usage of the promise attribute.

1 Like
5

The docs don’t look like they’ve been updated, still shows “then.from-view” :thinking:

6

It looks like this to me

image
image783×395 14.3 KB

Maybe cache issue?

7

I misunderstood when you said the documentation was updated, I thought you were referring to the “Building a widget-based dashboard” example that the OP was discussing. That is still using the “then.from-view” syntax.

1 Like
8

That should be updated too, thanks @davidsk