Comments (9)
Why don't you extend a component and allow a template
paramAttributes
property to be set, so you can load in your template?
from discussion.
I'm not sure if I understand the proposal - can you give a more detailed example?
from discussion.
nevermind, not sure how you can pass the option to the compiler without extending Vue.
from discussion.
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. 😃 Thanks for listening!
from discussion.
I updated the original description to explain what the value of v-template
should be--which I'd fat fingered originally leaving off the #
.
from discussion.
Have you tried v-partial
? http://vuejs.org/api/directives.html#v-partial
from discussion.
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.
💭's ❓
from discussion.
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.
from discussion.
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.
from discussion.
Related Issues (20)
- Use ||(or) in v-if (with nuxt js)
- Instantiate a copy of a component directly in that component HOT 1
- Call pre-defined javascript method on vue js event
- What about js-data.io?
- How to make vue bind to, or work with, html in properties
- Convert VueJS 1 to VueJS 2 HOT 2
- Third Party Libraries - Make non reactive?
- why v-switch not included in vuejs and what the alternative way HOT 1
- Use raw html inside v-bind
- iOS event bound using addEventListener is not triggering
- How to validate when blur a component.
- Google is not defined HOT 2
- vuejs can not find method or variable inside a callback function HOT 2
- Thousands of rows performance HOT 1
- how to pass Header + Body in POST api using Vue JS-axios HOT 4
- Conditional rendering and child component
- Fetch the value of element dynamically
- Vue breaks DataTables and Pace JS
- Bootstrap4 tag b-form-input has problem with @blur
- Invalid prop: Expected `Basic type`, got Nulll.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from discussion.