I have many scripts inside of my index.html file that holds all my Ractive scripts. I am wondering if there was some way to organize this all and have these scripts in different html or js files.
Here's what I mean:
//index.html
<script type="text/html" id="template-1">
...content...
</script>
<script type="text/html" id="template-2">
...content...
</script>
<script type="text/html" id="template-3">
...content...
</script>
Here's what I am trying to accomplish
//template1.html or js
<script type="text/html" id="template-1">
...content...
</script>
//template2.html or js
<script type="text/html" id="template-2">
...content...
</script>
//template3.html or js
<script type="text/html" id="template-3">
...content...
</script>
I have tried doing it this way, and I get errors since my ractive objects are on my index.html, and there's no way to include other html files. I'm sure other people have had this problem before, is this possible?
You should use per-file components. This allows you to package one component into one file, script, styles and markup while still keeping the separation between them. In order to use components, you need to use loaders which are available in just about every module management/bundling system out there.
You could use php or some other server side script
<?php
include_once('a.html');
include_once('b.html');
include_once('c.html');
?>
Related
I'm working on a asp.net web-form website in which I use ../ for routing files like js files, styles, etc. When I decided to apply ScriptBundle and replace ~/ instead ../ the website didn't work at.
js file completely are loaded on browser but they didn't work.
This is my code before ScriptBundle that work perfectly:
<!-- Page Scripts Starts -->
<script src="../Script/jquery.min.js"></script>
<script src="../Script/jquery.colorpanel.js"></script>
<script src="../Script/bootstrap.min.js"></script>
<script src="../Script/jquery.flexslider.js"></script>
<script src="../Script/bootstrap-datepicker.js"></script>
<script src="../Script/owl.carousel.min.js"></script>
<script src="../Script/custom-navigation.js"></script>
<script src="../Script/custom-flex.js"></script>
<script src="../Script/custom-owl.js"></script>
<script src="../Script/custom-date-picker.js"></script>
<!-- Page Scripts Ends -->
and this is after ScriptBundle:
<!-- Page Scripts Starts -->
<%: Scripts.Render("~/Script/js") %>
<!-- Page Scripts Ends -->
Cs file:
bundles.Add(new ScriptBundle("~/Script/js").Include(
"~/Script/bootstrap-datepicker.js",
"~/Script/bootstrap.min.js",
"~/Script/custom-date-picker.js",
"~/Script/custom-flex.js",
"~/Script/custom-navigation.js",
"~/Script/custom-owl.js",
"~/Script/jquery.colorpanel.js",
"~/Script/jquery.flexslider.js",
"~/Script/jquery.min.js",
"~/Script/owl.carousel.min.js"));
That is beacuse the order of the script files (in .cs) is wrong. jquery.min.js should most likely be first. Change the order so that it is the same as per your working example. Since atleast all jquery.*.js files uses jquery.min.js they must be loaded after jquery.min.js.
At the moment, I am using the NuGet package which allows me to define large bundles with many JS files,
bundles.Add(new ScriptBundle("~/Bundles/js/PartOfMyGiantAngularApp").Include(
// messages
"~/App/messages/service/messageCache.module.js",
"~/App/messages/service/messageCache.service.js",
"~/App/messages/message-list/message-list.module.js",
"~/App/messages/message-list/message-list.component.js",
"~/App/messages/message-detail/message-detail.module.js",
"~/App/messages/message-detail/message-detail.component.js",
"~/App/messages/message-edit/message-edit.module.js",
"~/App/messages/message-edit/message-edit.component.js",
"~/App/messages/message-create/message-create.module.js",
"~/App/messages/message-create/message-create.component.js",
"~/App/messages/message.module.js"
)
and the pull them all into my main html file:
#Scripts.Render("~/Bundles/js/PartOfMyGiantAngularApp.js")
Which will either produce one file in production:
<script src="/Bundles/js/PartOfMyGiantAngularApp.js"></script>
, or in dev it will render multiple script tags.
<script src="/App/messages/service/messageCache.module.js"></script>
<script src="/App/messages/service/messageCache.service.js"></script>
<script src="/App/messages/message-list/message-list.module.js"></script>
<script src="/App/messages/message-list/message-list.component.js"></script>
<script src="/App/messages/message-detail/message-detail.module.js"></script>
<script src="/App/messages/message-detail/message-detail.component.js"></script>
<script src="/App/messages/message-edit/message-edit.module.js"></script>
<script src="/App/messages/message-edit/message-edit.component.js"></script>
<script src="/App/messages/message-create/message-create.module.js"></script>
<script src="/App/messages/message-create/message-create.component.js"></script>
<script src="/App/messages/message.module.js"></script>
How do we get this automatic multiple files in dev mode when using the new build-time Bundler/Minifier without having to both specify each file in my bundle config AND in the main HTML page with an environment tag?
I want it to just work out the paths and give them to be just like the old one. It's hard to debug a single line of JS code when I have no idea which file it's from.
It's written very nicely here:
https://learn.microsoft.com/en-us/aspnet/core/client-side/bundling-and-minification?tabs=visual-studio%2Caspnetcore2x
Under: Environment-based bundling and minification
That we will have to do things like this:
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
This is a horrible solution when I have a lot of JS files!
I believe you want to disable bundling.
In your RegisterBundles method (BundleConfig class in the App_Start folder).
Add this, it will disable bundling
BundleTable.EnableOptimizations = false;
I have this in /client/main.html
<head>
<title>Meteor ESP8266</title>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
The CDN for bootstrap-toggle.min.js gives me Uncaught ReferenceError: jQuery is not defined because the CDN's javascript is loaded before Meteor's built-in jQuery has loaded.
What's the proper way to add JS from CDNs in Meteor 1.5?
Just add defer attribute into your <script> tag:
<script defer src="..."></script>
That will cause browsers to execute script after the document has been parsed (and other scripts have been loaded).
MDN documentation.
I'm creating a Meteor application. When first creating application, Meteor has put this sample code in hello.html
<head>
<title>hello</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
<template name="hello">
Hello World Template
</template>
I install Iron-Router package. then here is my lib/Router.js file:
Router.route('/', function () {
this.render('post_template');
});
And here is my client/templates/posts/post_template.html
<template name="post_template">
Example Template
</template>
I don't know why when I run this application. The result is:
HelloWorld Template
Example Template
In other word, which part of Meteor's configuration that load hello.html as default page, and then append all other templates in routing inside ?
Thanks :)
In this case the very first Meteor loads is the
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
Since you are calling there the hello template, thats the first you get on the screen.
I reccomend on this case use the layout template and remove the <body> tag
So first declare the route.
Router.configure({
layoutTemplate:'layout'
})
delete the <body> and <head> tags and place this layout template instead.
<template name="layout">
<navbar>
<!-- This stuff will be available on all routes since you are declaring on the layout template -->
</navbar>
{{> yield}} <!-- this yield helper will render the post_template or any other -->
</template>
For example
If you have this 2 routes.
Router.route('/', function () {
this.render('post_template');
});
Router.route('/example', function () {
this.render('example');
});
What happened here, when you go through the / route, iron router will render the 'post_template' html into the layout template, and when you navigate to /example, iron router will remove the post_Template html and render the content inside /example template, if you want to have the same content on all pages, declare it on the <layout> template i.e footers,navbars, etc
The layout template its like the "master" template here.
IR will append to the <body> if it exists (and otherwise add one for you) so it's recommended that you remove the entire <body> tag.
You are actually safe to remove the hello.html entirely (since you also don't need the hello template). If you want to keep the head tag, you could just modify the file to look like:
<head>
<title>hello</title>
</head>
To understand why hello.html is being included, see the Structuring your application section of your docs:
HTML files in a Meteor application are treated quite a bit differently from a server-side framework. Meteor scans all the HTML files in your directory for three top-level elements: <head>, <body>, and <template>. The head and body sections are separately concatenated into a single head and body, which are transmitted to the client on initial page load.
So all of your html files are always included. If you don't want to include them, you need to remove them from your app.
I've fruitlessly looked for examples of using Meteor with an Iframe. (Note that I have to use an iframe instead of a DIV because of the content that will ultimately go there). I've tried both:
<body>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click to see what you typed" />
<br>
<iframe id="compose" src={{> iframe-content}} height=600></iframe>
</template>
<template name="iframe-content">
<body>
<div contenteditable="true">
Edit me
</div>
</body>
</template>
This loads recursively, creating sub-Iframes continuously.
I've also tried
<iframe id="compose" src="content.html" height=600></iframe>
but Meteor munges the multiple HTML files together which also causes the iframe to fail.
The only thing that worked so far is SRCDOC instead of SRC, but that isn't well supported by multiple browsers like FF.
So, what's the trick to use an iframe within Meteor, preferably in the template rather than strictly through code?
You want the 'public' folder. Meteor leaves content in that folder alone, as described here: http://docs.meteor.com/#/full/structuringyourapp
Move 'content.html' into a folder named 'public' at the root of your project/app and reference it like so in the html:
<head>
<title>iframe</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
<iframe src="hello.html"></iframe>
</template>
To be clear for other readers, Meteor has no problem with iframes. The issue was with the location of the 'content.html' file the iframe referenced.
I don't understand your first code example:
<iframe id="compose" src={{> iframe-content}} height=600></iframe>
As far as I know, that's not how iframes work; you have to specify a url in the src attribute, you can't just put the actual HTML there. So that won't work.
As for the second example:
<iframe id="compose" src="content.html" height=600></iframe>
Where do you expect Meteor to get content.html if you haven't specified that that path exists? Since Meteor doesn't set up routing by default, there is no resource at /content.html. So you'd have to add the Meteor Router package or some similar routing mechanism, and then tell Meteor that when asked to serve /content.html, it should just return the content of some template. The challenging part is figuring out how to get Meteor to return "real" HTML and not the Meteor-wrapped live HTML construction that is usually served up.
I have been playing with iframe lately (mainly to encapsulate some page made for an app webviews) and if you put those html files in the /public folder and in the iframe src write absolute url /file.html then it just works.