In learning the awesome Aurelia framework, I have learnt that you can use the following composition techniques however I am not sure what would be the difference.
<compose view="./nav-bar.html"></compose>
or
<require from="./nav-bar.html"></require>
Any clarification is appreciated.
<require> imports resources that you want to use in the view. It's conceptually similar to a require() JavaScript call in AMD or CommonJS module code (or an import statement in ES6 code). You would use <require> to import a custom element or custom attribute that you wanted to use in your view. You'll still need to explicitly render it like <nav-bar></nav-bar>.
<compose> renders the specified view.
We will use already created templates in our app and we need to use in the current app via require.
you can use css and javscript files also in require.
But from compose you can render your views by giving your view modal name.
You can see this link to have a better idea about compose.
http://patrickwalters.net/best-parts-of-aurelia-1-composing-custom-elements-templates/
Related
To make code more simple/clean for me and my designers, I'd like to be able to do something like below. Is it possible - using a custom directive or render function to implement this with a simple attribute?
This would really help separating animation from structure and functionality, which I think could be helpful in many cases. I figure render functions can easily wrap an element with other HTML elements, but can they wrap elements (or components) with custom Vue transitions?
This:
<template>
<my-component custom-transition></mycomponent>
</template>
Becomes this:
<template>
<custom-transition>
<my-component></mycomponent>
</custom-transition>
</template>
Or maybe bring it up on Github?
Thanks!
A Vue forum member provided a great solution for me in this thread using dynamic components. Happy!
I have some method to generate random hexademical color. It will be used in very few (3 or 5) parts of the project. So I want to separate it from main code into some kind of Helper or smth else, and include it when needed (not globally).
I have 2 working ways to do this:
Using mixins. What I don't like is that when you read the code, you can't separate your own methods from methods of mixin.
Using plugins. What I don't like with that is that you have to write import Vue from 'vue' + Vue.use(MyPlugin) every time in all files where you want to use it. After that, you can call it like this.$ColorHelper.getRandomHEX().
So, the question is about aesthetics visualization.
What is the best practices to do such things?
PS: project was created from template with webpack.
Our team decide use function import from files-helpers
For example:
import { getRandomColor, getBackgroundColor } from 'Global/helpers/colorHelper';
// .....
let color = getRandomColor();
What good:
Don't need use excess import + use as in plugins
Method visually stands out, what it not from this
What bad:
Cant see visually what the helper have method. But possible can fixed with aliases. We dont think yet
Vue plugins are global, you only have to call the Vue.use method once. Then they should work wherever you use that particular Vue instance.
In a default project setup you normally don't have multiple Vue instance so it should work globally.
From the docs:
Plugins usually add global-level functionality to Vue.
And:
Use plugins by calling the Vue.use() global method:
Vue.use(MyPlugin)
https://v2.vuejs.org/v2/guide/plugins.html
I'm building a simple TodoMVC app using Vue + JSX, but the documentation seems to be seriously lacking. Thus, I'm writing down the points I need to address as part of a CR to the appropriate projects. The only document I've read as of yet is the guide, which doesn't cover much JSX at all. I don't know much about how the framework works yet, but I sure prefer using the render method over the string templates for performance/network reasons.
question
What's the proper way to create a class name binding in Vue + JSX? In my TodoItem component, creating either a class or className attribute makes Babel throw a compile error complaining the API is deprecated (and suggesting I add several seemingly unrelated dependencies to the mix). Plus, including the class property in the data object seems to change nothing.
secondary question
The lack of documentation, plus the wording on the guide gives the impression JSX is not the "proper" way to write Vue components. Is that so? What's the idiomatic way to do it, given I don't want to ship the compiler along with my app?
links
code on codepan
I sure prefer using the render method over the string templates for performance/network reasons.
If you're writing *.vue files and bundling them with vue-loader (Webpack), the HTML template gets compiled into a JavaScript render function anyway, so there isn't really any kind of performance issues in that sense.
On the other hand, if you're writing your Vue components with string templates like this:
new Vue({
template: '<div>Hello</div>'
})
then you'll need the Vue template compiler at runtime to convert the string into a render function.
Typically people would opt for writing render functions manually if they need to do something specific that would be difficult/impossible to do with the HTML template alone.
You've probably already read the docs, but just in case, the relevant sections are:
Render Functions & JSX
The Data Object In-Depth
babel-plugin-transform-vue-jsx Usage
What's the proper way to create a class name binding in Vue + JSX?
You would just bind to the class attribute like you would any other attribute:
<div class={this.klass}>
data() {
return {
klass: 'foo'
}
}
The lack of documentation, plus the wording on the guide gives the impression JSX is not the "proper" way to write Vue components. Is that so? What's the idiomatic way to do it, given I don't want to ship the compiler along with my app?
JSX is definitely supported, but it is not the recommended approach. The recommended approach is to write *.vue files and load them with vue-loader (if using Webpack).
Vue comes in two versions, one with and one without the template compiler. The one with the compiler included is only for development and should not be used for production builds (unless you require string template to render function compilation at runtime, which is unlikely). See Explanation of Build Files for more info.
Typically you write HTML string templates, and they get compiled to render functions (by vue-loader) at build time.
I have an Aurelia application in which I'm trying to build a CMS component. This component will load data from the server and this data mainly contains slug, title and content fields.
I also have several global components defined in my application, and I want to be able to use those components in the server so when I pull that data my CMS component is able to transform/compile those custom elements.
An example would be a tab component. I have the tab component with this structure defined:
<tab-panel>
<tab title="First"></tab>
<tab title="Second"></tab>
</tab-panel>
The CMS component will contain a content property which I use to pass a string like this: '<tab-panel><tab title="First"></tab><tab title="Second"></tab></tab-panel>'
The component needs to compile that string and render it in its view. I've checked the enhance API, but it doesn't worked, at least for me. Any other suggestion to dynamically compile/render custom elements??
Thanks a lot in advance.
I've found the solution. I've used a compose element and InlineViewStrategy and it worked well, the components are shows and binding works as expected.
If your custom elements are registered globally using globalResources you can actually using the TemplatingEngine to dynamically insert content into the DOM and then compile it after-the-fact. This blog post goes into detail in how you can do it.
However, I would use this as a last resort. As is mostly always the case, there are much better ways to do something in Aurelia. Using the <compose> element is a great way to dynamically render content in your Aurelia applications and should always be the first port of call.
I'm newbie to Bootstrap 3, but I noticed that Bootstrap require Javascript even if it's not necessary, e.g. dropbown menu doesn't work if js is disabled. Is there any good reason to prefer js over CSS?
I think cause Javascript and CSS are different and can't replace each other.
In CSS you can't do for example calculations, DOM manipulation, react on click and other live events. Javascript can't style your HTML, have media queries etc. see also: Performance: Pure CSS vs jQuery
Yes, i know there are alternative for everything, see:
Can I do this in pure CSS instead of using jQuery?, Can I have an onclick effect in CSS?, etc .... but it is not the same.
What's your problem with javascript? in the first place? Do you have some requirements like: "should work with javascript disabled". Should your site work with this requirement or should it be exactly the same. What are you alternatives for javascript disabled? basic CSS? full css3? For me it seems realistic to prevent errors with javascript disabled but not expect all work the same. In the case of a dropdown you could consider a alternative navigation structure.