I thought all I have to do (according to docs on git hub) is to put {{#def.loadfile('/snippet.txt')}} into my template so it would look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Data</title>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
{{#def.loadfile('/views/includes/header.txt')}}
<section>
{{~it.arrOut:value:index}}
{{=value}}!
{{~}}
</section>
</body>
</html>
but it does not seem to be working. I even tried to import withdoT.js, but still nothing.
All I get is "Internal Server Error", If you were able to make file includes work on dot.js can you please share your knowledge. I like this nifty engine, but docs for it are not as nifty.
I don't know if it apply to you, but on nodejs, using expressjs and express-dot.js,
what I did was to define loadfile:
in app.js
var doT = require('express-dot');
doT.setGlobals({
loadfile:function(path){return fs.readFileSync(__dirname + path, 'utf8');}
});
in index.dot:
{{#def.loadfile('/views/_submit_form.html')}}
basically it adds loadfile as a function that take a path and output a string in the "def" object of dotjs.
You could certainly adapt and enhance this to your specific needs
I'm pretty sure doT is looking for includes starting from the same directory as the current file is. Assuming that the current template is inside views, I think that just removing "/views" from the path should do the trick...
Related
I am trying to make a single page website for which I need a 3d rendering engine. But I keep getting the error:
The requested module '/Babylon.js-master/dist/babylon.js' does not provide an export named 'Engine'
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gcode Designer</title>
<link href="stylesheet.css" rel="stylesheet">
<script src="Main.js"> </script>
<style type="text/css" media="screen">
</style>
<script src="plotly-2.1.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
</head>
<body>
<p>hello</p>
<canvas id="renderCanvas"></canvas>
<script type="module" src="http://127.0.0.1:5500/gcodeViewerBabylon.js"></script>
</body>
Javascript
import { Scene, Engine } from '/Babylon.js-master/dist/babylon.js';
var canvas = document.getElementById('renderCanvas');
// Load the 3D engine
var engine = new Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
//Some More code
Things I have already tried:
Trying an installing from npm and trying to import. that doesn't work at all, gives the error "Failed to resolve module specifier "babylonjs". Relative references must start with either "/", "./", or "../"."
Trying a CDN
Both of those approaches did not work. I am washing exactly the same problems with another library. I am new web development, actually my first project. Maybe I am making some very fundamental mistake.
At the same time I imported three.js the same way and it worked beautifully.
Thanks for any help in advance.
If '/Babylon.js-master/dist/babylon.js' is stored in relation to this script then it should be './Babylon.js-master/dist/babylon.js' and if not local then it should be the full https...
BUT that likely would not fix your issue because that module doesn't not look like the "./babylon/core" module that you need to actually export engine and scene from.
You already referenced the babylonjs core in your html so you should be able to just change it to this
var canvas = document.getElementById('renderCanvas');
// Load the 3D engine
var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
var scene = new BABYLON.Scene(engine)
Also if you really want to use modules you might be able to change script type to module like in the example below, but I'm not familiar with that route
https://stackoverflow.com/a/34607405/12654186
Refs
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
https://v8.dev/features/modules#mjs
For developing and building my project, I use Vue CLI 3.
When building my project, it adds these meta-tags to index.html by default.
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
However, for mobile I want to add user-scalable=no to the viewport-tag.
How can I override these meta-Tags?
With vue-head and vue-meta, I had no luck. These plugins only add meta-tags instead of overrideing them.
thanksd brought me to the right answer. Since Vue CLI already has the html-webpack-plugin, I did it the official Vue CLI way (https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin).
1 - Added public/index.html
<!DOCTYPE html>
<html>
<head>
<title><%= htmlWebpackPlugin.options.title %></title>
<meta charset="utf-8"/>
</head>
<body>
<div id="app"></div>
</body>
</html>
2 - Set meta-tag in vue.config.js
chainWebpack: (config) => {
config
.plugin('html')
.tap(args => {
args[0].title = 'MyApp title';
args[0].meta = {viewport: 'width=device-width,initial-scale=1,user-scalable=no'};
return args;
})
}
You were on the right track with using vue-meta.
Don't add them statically in your index.html file.
Add them using vue-meta
Set the vmid property to some unique identifier, that way vue-meta will replace the contents of the existing meta tag rather than creating a new one.
When building my project, it adds these meta-tags to index.html by
default.
Yes, but you can modify index.html at your will after that.
How can I override these meta-Tags?
You can either hard code them directly in the classic way in index.html or use the plugins you mentioned.
With vue-head and vue-meta, I had no luck. These plugins only add
meta-tags instead of overrideing them.
That is not a plugin's problem: HTML does not provide a way to override meta tags. It is up to you to set the right meta tags.
If, like me, you are interested in dynamic Open Graph protocol meta tags, you'll need to use the more verbose syntax to make sure you add Meta tags with property (instead of name) and content tags.
I know the original question doesn't specifically ask for these types of tags, but I'm going to share this to hopefully help anyone else who looking and couldn't find an answer to cover a broader type of meta tags.
Here's an example, where you pass in an array of objects, instead of a single object:
config.plugin('html').tap(args => {
args[0].meta = [
{
property: 'og:image',
content: `${environment_url}/images/logos/my_logo.png`,
},
{
property: 'og:image:width',
content: '1200',
},
{
property: 'og:image:height',
content: '1200',
},
];
return args;
});
You can define multiple meta tags in a single object (when you use the non-Array approach), but you'll lose control of the "property" tag name.
I was able to find this syntax within the examples show on this page:
https://github.com/jaketrent/html-webpack-template
I'm building an App in a non-node environment but I want to make use of Babel's ES6 transpiling so that I can write somewhat nicer code and still support IE11.
So I went ahead and included the standalone file found here:
https://github.com/babel/babel/tree/master/packages/babel-standalone
But it seems like you also need an additional plugin to actually transpile arrow function syntax, but of course because I don't have access to the import/export module features I'm not sure if it is even possible to include these plugins.
Does anyone know a way around this?
As you have shown ZERO code in the question, and you're going on about setting this preset or that preset (blah blah blah), I can only assume you're doing something wrong
This HTML works in IE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Home</title>
<script src="https://unpkg.com/#babel/polyfill/browser.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="output"></div>
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>
</body>
</html>
How does it compare with what you are doing?
I am trying to use Jquery for the first time and I am getting an issue. I am using VS 2013, asp.net and VB.
My head tag is as follows.
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#LowerText').hide();
$('#UpperText').hide();
$('#AssetStatusChoice').change(function () {
if($('#AssetStatusChoice').val("Fully Available"))
{
$('#CommentsText').hide();
}
if ($('#AssetStatusChoice').val("Restricted"))
{
$('#UpperLimit').show();
$('#LowerLimit').show();
}
if ($('#AssetStatusChoice').val("Unavailable"))
{
$('#Commentstext').show();
}
});
});
</script>
</head>
When I debug the page I get the following error.
0x800a1391 - JavaScript runtime error: '$' is undefined
It seems from Googling the error that I am not referencing the js file correctly. Can anyone help?
Add <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script> and Remove the
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script> Just use a host Jquery instead of adding it to you source. Read more :
3 reasons why you should use hosted jQuery
IIS doesn't serve content in the /bin directory.
Move it to another directory like /scripts or /js or /scripts/lib, something like that. The bin directory is a bad place to put script files.
You have a number of options here. You could use the Google CDN by adding the following to your header:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Or, as it appears you're using .NET, you could do this:
<script type="text/javascript" src="<%=ResolveClientUrl("~/Bin/jquery-1.10.2.js") %>"></script>
The second option gives you the additional advantage that when used in a master page can be used in any content pages at any file system level and it will still resolve correctly.
As Stefan has also said, I'd recommend moving your jQuery file from your bin directory.
Copy the jQuery file in some other folder, like Scripts, or js, and in Solution Explorer check to see all files. Find the jQuery file you just copied, include it in the project, then drag it on the page where you want to place it. A correct script tag will be created.
I'm trying to use an external js file to use in my pyramid project.
I found this solution but i can't seem to get it work.
The js files i want to include are in C:\env\uza\uza\static\js
project name = uza.
In my template i use this to call the script:
<script type="text/js" src="${request.static_url('uza:static/js/fabtabulous.js')}" />
<script type="text/js" src="${request.static_url('uza:static/js/tablekit.js')}" />
my init.py looks like this:
config.add_static_view('static', 'static', cache_max_age=3600)
When i navigate to the page in my browser it just gives me the pyramid sidebar in raw html code. I know it's a stupid mistake i made somewhere but i can't seem to find it. Is annyone able to help me with this.
EDIT:
I uploaded a pdf to give a better understanding of the problem i'm having.
ps: there are no errors in console.
https://dl.dropboxusercontent.com/u/6752022/problem.pdf
EDIT:
I made a new project using the sqlalchemy scaffold.
The changes I made are:
- include this line in the mytemplate.pt
<script type="text/js" src="${request.static_url('javascript:static/js/tette.js')}" />
<input type="button" onclick="popup()" value="Click Me!">
- i didn't change annything else because i don't think anny other changes need to be made in the scaffold.
my tette.js file looks like this:
function popup() {
alert("Hello World")
}
This is the output i have before including the js file. (deleted a few divs)
And this is after.
what am I doing wrong ? thanks in advance.
Can you back it out to a point to where the pyramid sidebar looks and works correctly, and isn't raw HTML?
Your init.py line looks correct. Then in your templates you can get at whatever is in the 'static' folder like so:
<link rel="stylesheet" href="${request.static_url('myproject:static/style.css')}">
<!--[if lte IE 6]>
<link rel="stylesheet" href="${request.static_url('myproject:static/ie6.css')}" type="text/css" media="screen"
charset="utf-8"/>
<![endif]-->
<script type="text/javascript"
src="${request.static_url('myproject:static/tinymce/jscripts/tiny_mce/tiny_mce.js')}"></script>
it's as Peter Tirrell says.
I didn't say the type was javascript.