Nuxt.js: data context for handlebars template

[husayt]

here is the sample i tried to get handlebars working:

<template lang="handlebars">
    <div class="text-center">
    <h1>{{title}}</h1>
    <div>
        {{data}}
    </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        title: 'HBS DEMO',
        body: 'This is the body'
      }
  }
</script>

before i did run npm i handlebars handlebars-loader to install dependencies

it compiles and renders, but without data. data is not bound correctly. The context passed to handlebars template is ['handlebars', 'html', '..path to vue file...\xxx.vue'].
Seems it is just a matter of passing right context to template

_{This question is available on Nuxt.js community (#c1563)}

[homerjam]

You haven't bound anything to data, only title and body. BTW you don't need handlebars for this.

[husayt]

Obviously, I don't need handlebars for this, it is just a simple example to showcase the problem.

i am trying to get simple handlebars template working with data binding.

This is exactly the question, how to bind handlebars context to data. Bonus question would be how to register extra helpers?

Thanks

[homerjam]

Hmm, I think you're making life more difficult than it needs to be.

FWIW I think you have a simple mistake...

{{data}}

to
{{body}}

[husayt]

@alexchopin is this closed because it can't be done? but it is almost there. From what I see handlebars kicks in and is processesd. The only thing is handlebars context is not bound to data correctly.

normally this is how it is done in code:

var source   = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"};
var html    = template(context);

Seems like in our case this was passed as context ['handlebars', 'html', '..path to vue file...\xxx.vue'] instead of data. Basically template(data) needs to be run. That's it.

@homerjam that is not really mistake, i was trying data,body,title, this.body and etc in case if context was different. Vuejs data is not bound to context. As for use cases, there are many, maybe you didn't come accross them

[homerjam]

It is a mistake in the code example you posted, obviously I can't know what you tried, I'm just responding to your example.

Would love to know what the use cases are that aren't covered by Vue itself.

[husayt]

@homerjam again it is not a mistake. It demonstrates the point i wanted to make.

Would love to know what the use cases are that aren't covered by Vue itself.

This is something which is supposed to be covered by vue. Vue supports different template languages like pug, markdown and etc. I tried another one.

As for use case, i have multiple projects with bunch of handlebars templates, i tried to render them with vue/nuxt.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.