v-template directive

[BigBlueHat]

I'm finding that many of my components in vue-github only vary around the template.

Since I'm leaning on markup for instantiation of everything but a "root" Vue.js app, it'd be slick to be able to do something like:

<div v-component="github-milestone-list" v-template="#accordion"></div>

The value of v-template should either be a DOM ID or (very) basic template string--DOM ID would obviously be preferred to avoid having to escape the whole template.

Thanks!

[wprater]

Why don't you extend a component and allow a template paramAttributes property to be set, so you can load in your template?

[yyx990803]

I'm not sure if I understand the proposal - can you give a more detailed example?

[wprater]

nevermind, not sure how you can pass the option to the compiler without extending Vue.

[BigBlueHat]

In vue-github I have what amount to "data-only" components--that load their data via XHR--and rendering components that extend the "data-only" ones. What's started to materialize is that I'll have components that only differ in what template they select. They lean on the component they extend for their data, methods, etc.

Here are some examples: github-issue-list These extend the above component, and only modify the template value: github-issue-list-accordion github-issue-list-flattened

Having v-template would allow me to avoid the JS boilerplate and also allow other developers to provide their own templates at run time by simply providing a different template.

This could also open up opportunities to have ad hoc component creation using v-with + v-template:

<div v-with="issues" v-template="#issue-list"></div>

<script id="issue-list" type="text/vuejs+template">
<ul>
  <li v-class="completed: state == closed">{{name}}</li>
</ul>
</script>

Hopefully that's getting closer to expressing it right. :smiley: Thanks for listening!

[BigBlueHat]

I updated the original description to explain what the value of v-template should be--which I'd fat fingered originally leaving off the #.

[yyx990803]

Have you tried v-partial? http://vuejs.org/api/directives.html#v-partial

[BigBlueHat]

So v-partial worked great! But it's a bit wordy...

<component-thing v-partial="custom-template">
{{> custom-template}}
</component-thing>

<script id="custom-template" type="text/vuejs+html">
Hello World!
</script>

Vue.app({
  partials: {
    'custom-template': '#custom-template'
  }
});

Maybe rather than introducing a new v-template directive (though I think that'd be clearest), all that's needed is to make v-partial watch for # prefixed strings and do the DOM-based template loading it can do already.

Implementing that change seems like a Good Thing anyhow.

:thought_balloon:'s :question:

[temp-name-9956]

This can be made by yourself, it's quite easy actually.

Put this code globally, anywhere it makes sense for you, so it run on every page load:

$('body .vue-template').each(function() {
    Vue.partial(this.id, '#' + this.id)
});

And this css:

.vue-partial { display: none; }

And than you can just simply invoke vue components like that:

<div id="custom-template" class="vue-template">
    Hello world!
</div>

<div v-component="custom-component" v-partial="custom-template">
    Vue is going to replace me with `Hello world!`
</div>

Just make sure to run the javascript part before initializing vue instance, and you're good to go.

Also keep in mind that's probably better to narrow the scope of searching templates for performance reasons, for example $('#content-wrapper .vue-template').each( ... ).

If you don't have too many components on a single page / view this shouldn't have any noticeable performance impact. But if there are many many small components it's probably better to extend / hack vue component and implement a "try" to get the template by id if there is no registered one - getting html node by id is much faster - and then extend your own components from that.

---

As a side note I would say that I also think vue could have it's own way to deal with that the proper way. It's important especially when you're using vue for reactive components (still using server side views). In that case - for example - you want to handle localization strings your framework's usual way, and this way you can, as you can print them in your view directly to vue partial.

Also real world applications aren't that much "generic". It's common when components markup differs for different views, but the logic still remains the same. And registering every single partial feels redundant in this case.

Anyway, that's just my five cents.

[temp-name-9956]

Actually my hack will need a bit more to work. The above way does not work when you want to put variables inside partial template, so in most cases. Variables are - somewhere - out of scope when v-component and v-partial are on the same node.

So here's what you need to do (non mentioned things stay as they are):

<div v-component="custom-component" v-with="template: 'custom-template'">
    Vue is going to replace me!
</div>

Notice that we don't use v-partial here, but v-with instead, and now in your component implementation you simply declare a static template:

var custom-component = Vue.extend({
    template: '<div v-partial="{{ template }}"></div>'

    // ... other component stuff
});

So now v-component and v-partial are on different nodes and scope works as usual.