Template context serialization

[LazerRaptor]

I'd love to be able to use ninja's router like this:

class HomepageContext(Schema):
    users: List[UserSchema]


@router.get(context: HomepageContext)
def homepage(request):
    context = {"users":  User.objects.all()}
    return TemplateResponse(request, "homepage.html", context)

Motivation

My use-case is Alpine.js, I'd like to pass all context data from Django to Alpine like so:

// index.js
import Alpine from 'alpine.js';

Alpine.data('homepage', (contextData) => ({
  context: null,
  init() { this.context = contextData } 
});

# homepage.html
<div x-data="homepage({{ context }})">...</div>

Thus, I will be able to use Alpine.js directives without mixing them up with DTL. Serialized context can also be used with Riot.js (and maybe some other JS frameworks, who knows?).
I believe Django can work greatly with a hybrid approach when we render some content as HTML and other as JSON. And ability to serialize template context can be quite useful in this scenario.

[vitalik]

What actauly happens when you call Alpine.data ? does it do get / post ?

[LazerRaptor]

Alpine.data is just a way to register a JS class, basically. Then we can bind it to a node and its children using x-data directive. It's methods can be async so they can make requests to ninja endpoints if needed. With Django rendered HTML it becomes pretty similar to a Vue component. Which can take Django view context as props, but the context needs to be serialized as JSON, naturally.

[vitalik]

@LazerRaptor

what you need looks like this:

@router.get('/')
def homepage(request):
    return TemplateResponse(request, "homepage.html", {
         'context': HomepageContext(users=User.objects.all()).json()
    })

and add safe to template:

<div x-data="homepage({{ context | safe }})">...</div>

[LazerRaptor]

Vitaliy, thanks a lot. For some reason, I thought it would require a couple of lines of code to achieve this, that's why I thought it needed to be done inside the decorator. But it's really short and doesn't clutter views. Sorry, that was a bit silly of me.
And thank you for the great library!

[baseplate-admin]

Please mark this as answer :)