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.
Related
In vue 2, in order to incorporate vue into an existing web forms ASPX page you just had to add the proper script tag. Something like this :
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
Can you do this with Vue 3? I've been researching how to incorporate vue 3 into existing web forms application, like ASPX pages, and can't find anything on it. Can anyone show me how to incorporate vue 3 into an ASPX page?
use this
<script src="https://unpkg.com/vue#next/dist/vue.global.prod.js"></script>
or
<script src="https://unpkg.com/vue#next/dist/vue.global.js"></script>
The Vue package makes multiple packages available:
vue.cjs.js
vue.cjs.prod.js
vue.esm-browser.js
vue.esm-browser.prod.js
vue.esm-bundler.js
vue.global.js
vue.global.prod.js
vue.runtime.esm-browser.js
vue.runtime.esm-browser.prod.js
vue.runtime.esm-bundler.js
vue.runtime.global.js
vue.runtime.global.prod.js
You'd pick whichever one work best, but the simplest way to go is to use the vue.global.js during development and vue.global.prod.js in prod
Example
const app = Vue.createApp({
template: document.getElementById("appTemplate").innerHTML
})
app.component('my-component', {
template: document.getElementById("componentTemplate").innerHTML,
props:{name:{default: "🤷♂️"}}
})
app.mount('#app')
<script src="https://unpkg.com/vue#next/dist/vue.global.prod.js"></script>
<div id="app"></div>
<template id="appTemplate">
<h1>APP</h1>
<my-component name="world"></my-component>
</template>
<template id="componentTemplate">
Hello {{name}}
</template>
Based on official docs you could use CDN as follows :
<script src="https://unpkg.com/vue#next"></script>
I have tried the following in my blade template:
#section('styles')
<link href="{{asset('assets/css/app.css')}}" />
#stop
In the master blade template I have included the following:
<link href=asset('/assets/template/css//invoiceTemplate.css')rel="stylesheet" type="text/css"/>
I you want to include a CSS / JS file for a specific blade use stacks (see here)
from the documentation:
#push('scripts')
<script src="/example.js"></script>
#endpush
You may push to a stack as many times as needed. To render the complete stack contents, pass the name of the stack to the #stack directive:
<head>
<!-- Head Contents -->
#stack('scripts')
</head>
you can also place them at the bottom of your blade (where a lot of people call thier JS files these days)
You need to add #yield('styles') to your master blade template.
Yes it is. Write this code to your master template
#yield('page-styles')
and add this also to the specific blade file where you want to add a specific CSS file.
#section('page-styles')
//Your specific css file
#stop
Make sure that the parameter inside the #section and #yield are the same.
In this case, I've used 'page-styles'.
I've got a very simple template problem going on that appears to be similar to this guy's problem, though I've tried to build a simple example to demonstrate the problem and hopefully have someone explain to me how to fix or work around it.
Although as I'm doing some online research, it may be that the official documentation is out of date with the code. The reason I haven't bought into accepting that just yet is that the problem seems to have existed for a while, the dates on such articles in forums appears to be fairly old, and there's talk of it being fixed. There's also talk the feature is gone. What's the new way, if there is one?
I'm using Meteor 0.9.0.1 with iron:router 0.9.1. Specifically, I set up my project like this:
$ meteor create ironTest
$ cd ironTest
$ meteor add iron:router
$ meteor
Pointing my browser at http://localhost:3000/ as instructed, shows the default project. So far so good.
Now make ironTest.html contain this:
<body>
<h1>Before</h1>
{{renderRouter}}
<h2>Afterward</h2>
</body>
<template name="hello">
Hello Template
</template>
<template name="goodbye">
Goodbye Template
</template>
Make ironTest.js contain this:
Router.configure({
autoRender: true // we will experiment with this Boolean shortly
});
Router.map(function () {
this.route('hello');
this.route('goodbye');
});
If you go to the routes http://localhost:3000/hello and http://localhost:3000/goodbye, you'll see the templates correctly render as expected and documented, appended to the <body> element, so it appears after the <h2> element.
According to the current documentation for iron:router, one should be able to set the autoRender property to false, and the template should no longer be appended to the <body> element, but rather be injected where the Handlebars (okay, Spacebars) element {{renderRouter}} is, that is, between the <h1> and <h2> elements.
When I try this, visually it doesn't do anything. Opening a JavaScript Console to look at errors shows none. Although, by deliberately going to an invalid route it will show a missing template router exception, showing the routing code is indeed working.
Does anyone know how to coerce the code above into working?
For the curious, I've got a working simplistic equivalent that might be of use to others working this problem.
This new ironTest.html uses a template (for a layout) with no <body>:
<template name="main">
<h1>Before</h1>
{{> yield}}
<h2>Afterward</h2>
</template>
<template name="hello">
Hello Template
</template>
<template name="goodbye">
Goodbye Template
</template>
This ironTest.js instead uses a layout:
Router.configure({
layoutTemplate : 'main'
});
Router.map(function () {
this.route('hello');
this.route('goodbye');
});
It's worth an aside that this solution doesn't work for me, as I don't want a global layout, and have concern that riddling layouts in the route themselves is a tighter coupling than desired for my purposes.
I'm currently looking for a way to dump debugging log information from the Router as it performs transitions, but that's another story.
I thought that having something like:
Router.configure({
layoutTemplate : "template"
});
and then
<template name="template">
<head>
<title>Your Website Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
{{> menu}}
{{> yield}}
</body>
</template>
would continue to work after the last update. Any idea what changes need to be made in order to keep my layout working ? Doesn't seem to be described very well anywhere for now.
What I get after rendering the page is just
template
in the upper left corner of the browser.
Edit1: For some reason, my browser console wasn't printing out any errors before, but it is now. It seems like it's related to accounts-ui-bootstrap-3 - it's trying to use Spark, I'll try changing to the blaze(dev?) branch and try again.
Edit2: Replaced the appropriate line in the smart.json file with this
"accounts-ui-bootstrap-3": {
"git": "https://github.com/mangasocial/meteor-accounts-ui-bootstrap-3.git",
"branch": "blaze"
}
It seems to have helped with the errors I am getting in the console, but I still just see the "template" text in the upper left. The "blaze" branch seems to be undergoing active updates, so it's probably just that... will update when I figure this out.
In Meteor 0.8.0 {{yield}} is now {{>yield}}
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.