I'm looking with interest at VueJS. I've seen the documentation about defining resources per component, but I would rather have template files separate from js files in my development environment.
I'm using Webpack so I'm thinking it should be possible to compile these separate resources together for use at run time.
Has anyone had any success in configuring Webpack to do this? I've tried using the text-loader to require html templates from inside my js files, but then the scoped css was ignored.
It would be nice to have the option of separating the css too. The docs seem to favour Browserify for this kind of approach.
You can use the src attribute to split the component into multiple files.
<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>
Documentation
Related
I am currently in the process of designing and refining a landing page. Over the time, many things have been added and handling the amount of sections and modals is not as it easy as it used to be.
Coming straight to my question: Is there a simple solution to use templates in your normal web design flow to create static web sites. I do not need the advantages of a static site generator, like also compiling my sass or minifying my js files. Interpolation and a config file are also not needed nor wanted. Do you know any system that only allows me to split my html file into multiple components which will then be saved in different html files?
P.S. I am not looking for a Javascript template engine. The creation should happen once and produce a normal html file.
You can use a template engine like pug with client tool.
Example with pug:
Step 1: Install pug-cli
npm install -g pug-cli
Step 2: Code html using pug syntax (very easy to learn). Ex: Split home page file into multiple components (header, footer in folder template_parts):
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
title Document
body
include template-parts/header.pug
h1 Home page
include template-parts/footer.pug
Step 3: Run pug-cli to auto convert html code
$ pug -w ./ -o ./html -P
Change ./ after -w by location of pug files, ./html after -o by location of html files after convert.
Without using PHP includes, I'm not sure if this can be accomplished without using some form of JS Templating engine as:
The majority of the web's content has a simple and declarative way to load itself. Not so for HTML
You should check out:
Metalsmith
An extremely simple, pluggable static site generator.
Handlebars
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.
If you're using GULP/GRUNT in your workflow anyway there are include plugins:
npmjs search for 'gulp include'
npmjs search for 'grunt include'
Best solution for that is to use server side rendering as the previous answare said.
But checkout this attaribute powered by w3schools it might help you.
I know this answare is to late. but it might help others.
Thanks.
I have a fairly big webapp with lot of templates. I am looking to save time by precompilation of these files.
Currently, I use a script wrapper so that I can load it dynamically and package them in html
<script id="all-domain-users-model-template" type="text/html">
<td></td>
<td>{{domain}}</td>
<td>{{name}}</td>
<td>{{email}}</td>
<td>{{is_account_owner}}</td>
<td>{{#if is_account_owner}}Delete{{/if}}</td>
</script>
There are many many such files. One file can have more than one definition..
I am looking for ideas for a script to read the name in id, parse html, compile and put it back using id.templates in a js file.
I have seen Using pre-compiled templates with Handlebars.js (jQuery Mobile environment) - the accepted answers mentions that the script tag was removed before copying.. But in reality, its almost impossible..
I use grunt-ember-templates to precommpile my ember handlebars templates.
For a good example of this grunt plugin in use check out this example todos application.
It gives a good example of using grunt for your build process, testing, etc, and includes template precompilation.
I'm using precompiled templates for several reasons:
Performance (no need to re-compile at runtime)
Code separation (cleaner than embedding <script> tags and hardcoding in JS)
Content security policy (this is for an extension).
Basically, I'm generating templates.js via the handlebars command line utility, based on several template.handlebars files. Next I try to bring these templates into Ember with the following loop:
for (var name in Handlebars.templates) {
var template = Handlebars.templates[name];
Ember.TEMPLATES[name] = template;
}
The result is weird: text seems to be loaded, but many template features (eg. {{outlet}}) don't work. I suspect that this is because Handlebars and Ember-Handlebars are not the same thing.
I guess there are two options (and questions):
Precompile Ember-friendly templates (how can I do this via a command line?)
Properly import Handlebars templates into Ember (how?)
UPDATE: As per the answer, Ember.Handlebars is not the same as Handlebars, so the precompilation is different. Wrote a simple script to precompile for Ember: https://gist.github.com/3723927
Yes, the plain Handlebars compiler compiles to different JavaScript than Ember.Handlebars, so you cannot consume its output with Ember.
I don't know of a way to run Ember.Handlebars through the command line, though it should be possible in principle to write something.
To find out how to precompile with Ember.Handlebars, take a look at the source code of ember-rails - it supports precompilation.
I've just written my app.js file and everything is nicely working but the whole file is currently 450 lines long and will be getting bigger.
Is there any best practice about splitting out state manager code or view code into different files (like states.js or views.js) so that everything is a little bit cleaner?
Also on that note... is there a preferred way to split out handlebars templates out into different files? I've currently just got them all defined in one html file which is starting to get a tiny bit unwieldy too.
I was facing the exactly same question two weeks ago, and I didn't wanted to try AMD with requireJS, which seemed a bit complicated for what I wanted to do (and seemed to have advantages but also disadvantages..)
The simple solution which convinced me is the following :
I have 3 folders in my js folder : "models", "controllers", and "views" which contains my js "classes", and I have an "index.html" that import all the js files (I used HTML5 boilerplate to get a convenient index.html).
To be clear, in my index.html, I have at the end of the file something like :
<script src="js/app.js"></script>
<script src="js/models/note.js"></script>
<script src="js/controllers/notesController.js"></script>
<script src="js/controllers/selectedNoteController.js"></script>
<script src="js/views/menuView.js"></script>
<script src="js/views/noteResumeView.js"></script>
<script src="js/views/noteView.js"></script>
<script src="js/views/createNoteView.js"></script>
<script src="js/views/listeNotesView.js"></script>
Hope this help, (and that I didn't misunderstood your question)
You can use RequireJS to load you ember app (including handlebars templates) from different files.
This answer describes how and also links to a sample app showing how to set things up. I have just tried this approach to one of our websites and it works nicely.
I use ember-skeleton for my projects.
To get started simply do the following:
git clone https://github.com/interline/ember-skeleton.git my-app
cd my-app
bundle install
bundle exec rackup
And then go to http://localhost:9292
Also take a look at the wiki for further build tools and templates.
The standard way to do this is now to use ember-cli. Find more information at http://www.ember-cli.com/
where to place the js_plugins and css_plugins?
I want to create a html/css template.some css files and are coded myself,such as
css/my.css
js/site.js
but sometimes I want to use some existed css or js plugins from other people who had shared on web,such as
1.some plugins only have css,no js needed. (ex:css3_button.css)
2.some plugins have both css and js. (ex:jquery.prettyphoto.js && jquery.prettyphoto.css)
for these plugins ,where should i put them in my template folder?
i do it like this bellow, but i don't think my structure is good enough.
index.html
css
....my.css
js
....my.js
css_plugin
....css3_button
........css3_button.css
js_plugin
....jquery_prettyphoto
........jquery.prettyphoto.css
........jquery.prettyphoto.js
how to place these files, to ensure the easy managing in the feature?
I use static folder, which includes folders for CSS, images and JavaScript. You can also add a folder for your plugins, where each plugin will be in its own folder.
You can replicate your general structure inside each plugin folder, but most plugins come pre-organized, and changing their structure is not always easy.
example
index.html
static
...js
...css
...img
...plugins
......myFavoritePlugin
.........css
.........js
.........img
......myFavoritePlugin2
.........css
.........js
.........img
Keeping the plugin files together makes their maintenance easier, but it affects performance. It is best practice to combine CSS and JavaScript files when deploying on production machines. You can have best of both worlds if you use build scripts, such as ant