I'm using the googlemaps package and I'm unable to get the map to render.
main.html contains:
<body>
<div id="map-canvas"></div>
</body>
and main.js contains:
GoogleMaps.init(
{ ... });
Everything is set correctly (API Key, mapOptions, etc.) but the map is not rendering. What am I missing? Thanks.
The reason this does not work is when the JS runs, the HTML may not be drawn yet. This style should work instead which waits for the DOM to be drawn, then inits the map.
<body>
{{>mapTemplate}}
</body>
<template name="mapTemplate">
<div id="map-canvas"></div>
</template>
Then your JS
Template.mapTemplate.rendered = function() {
GoogleMaps.init(
{ ... });
}
An alternative to not splitting your map into mapTemplate is to init your map in the UI.body.rendered callback
Related
Example:
var vm = new Vue({
el: '#app',
data: {
name: 'Bob'
}
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
Hello {{name}}
<style>
body { color: blue; }
</style>
</div>
JS Fiddle: https://jsfiddle.net/7g1vp68b/6/
When tag is outside of the vue element, it renders okay.
Vue can't parse <style> inside template.
If you check console log, there is an warning:
Templates should only be responsible for mapping the state to the UI.
Avoid placing tags with side-effects in your templates, such as
, as they will not be parsed.
You should place <style></style> outside of Vue template, or using Vue single file component
I am trying to apply routing with the help of flow router package. But it is not working for me as what I had expected. I will share my code, please let me know where I am going wrong! Thanks in Advance.
FlowRouter.route('/',{
name:'home',
action(){
BlazeLayout.render("HomeLayout");
}
});
FlowRouter.route('/test',{
name:'test',
action(){
BlazeLayout.render('MainLayout',{main:'Test'});
}
});
And I am getting following error when I go to localhost:3000/test.
modules-runtime.js:36Uncaught Error: Cannot find module './main.html'
Exception in defer callback: Error: Expected template or null, found: undefined
at ._render (http://localhost:3000/packages/spacebars.js?hash=65db8b6a8e3fca189b416de702967b1cb83d57d5:61:13)
at doRender (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:2027:25)
at http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:1875:20
at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:3687:12)
at http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:1873:29
at Object.Blaze._withCurrentView (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:2214:12)
at viewAutorun (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:1872:18)
at Tracker.Computation._compute (http://localhost:3000/packages/tracker.js?hash=f525263111eb9d90f4ce1ad064f97aca4a6c1b07:339:36)
at new Tracker.Computation (http://localhost:3000/packages/tracker.js?hash=f525263111eb9d90f4ce1ad064f97aca4a6c1b07:229:10)
at Object.Tracker.autorun (http://localhost:3000/packages/tracker.js?hash=f525263111eb9d90f4ce1ad064f97aca4a6c1b07:604:11)
Please tell me where I am wrong? Do I need to make any changes in my code?
Here is my index.html file code :
<head>
<title>intermediate-meteor</title>
</head>
Here is my MainLayout.html:
<template name="MainLayout">
<header>
<h1>My Recipe Book</h1>
</header>
<main>
{{>Template.dyanamic template=main}}
</main>
</template>
<template name="Test">
<h1>Test Template Rendering form Main Template...!!</h1>
</template>
Here is my HomeLayout.html:
<template name="HomeLayout">
<header>
<h1>My Recipe Book</h1>
</header>
<main>
<div class="billboard">
<h2>Organize your meals</h2>
</div>
</main>
</template>
Package.jason file code:
# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.
meteor-base#1.0.4 # Packages every Meteor app needs to have
mobile-experience#1.0.4 # Packages for a great mobile UX
mongo#1.1.12 # The database Meteor supports right now
blaze-html-templates#1.0.4 # Compile .html files into Meteor Blaze views
reactive-var#1.0.10 # Reactive variable for tracker
jquery#1.11.9 # Helpful client-side library
tracker#1.1.0 # Meteor's client-side reactive programming library
standard-minifier-css#1.2.0 # CSS minifier run for production mode
standard-minifier-js#1.2.0 # JS minifier run for production mode
es5-shim#4.6.14 # ECMAScript 5 compatibility for older browsers.
ecmascript#0.5.8 # Enable ECMAScript2015+ syntax in app code
shell-server#0.2.1 # Server-side component of the `meteor shell` command
kadira:flow-router
kadira:blaze-layout
Please go through my code and tell me where i am doing a mistake?
Your index.html file is the one that needs the dynamic Template: index.html
<head>
<title>intermediate-meteor</title>
</head>
<body>
{{> layout}}
</body>
<template name="layout">
{{> Template.dynamic template=main}}
</template>
Then you can control what template gets loaded from what URL in the routes.
So at the end, your routes should look like this:
FlowRouter.route('/', {
action: function() {
BlazeLayout.render('layout', { main: 'MainLayout' });
}
});
FlowRouter.route('/test', {
action: function() {
BlazeLayout.render('layout', { main: 'Test' });
}
});
FlowRouter.route('/home', {
action: function() {
BlazeLayout.render('layout', { main: 'HomeLayout' });
}
});
I have my HTML setup with an index.html file that only load the main template:
<body>
{{> layout}}
</body>
<template name="layout">
{{> Template.dynamic template=main}}
</template>
Then I create a new HTML file for each template: test.html
<template name="test">
<h1>Hello, this is a test page</h1>
</template>
And of course, your homelayout template in another file: homelayout.html
<template name="homelayout">
<h1>Hello, this is the home page</h1>
</template>
It seems that you deleted the default client/main.html file. Did you update the "import './main.html'" line in client/main.js ?
I'm a newbie to angularJS and I'm trying to make the simple thing to work but I fail.
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="main.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body ng-app="app" ng-strict-di>
<div class="test" ng-controller="testSrc">
<p> {{ blah }} </p>
<img ng-src="{{ URLImage }}"/>
<button class="btn btn-sucess" ng-click="goYahoo()">Yahoo</button>
<button class="btn btn-sucess" ng-click="goGoogle()">Google</button>
</div>
</body>
</html>
JS:
var app = angular.module("app", []);
app.controller('testSrc', ['$scope,$location', function ($scope, $location) {
"use strict";
$scope.blah = "blah blah";
$scope.URLImage = 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png';
$scope.goGoogle = function () { $location.url('localhost:58164/g'); };
$scope.goYahoo = function () { $location.url('localhost:58164/y'); };
}]);
app.config(function ($routeProvider) {
"use strict";
$routeProvider
.when('/', {
templateUrl : 'index.html'
})
.when('/g', {
templateUrl : 'http://www.google.com'
})
.when('/y', {
templateUrl : 'http://www.yahoo.com'
});
});
The code has passed all lint warnings. I use the live preview of brackets that opens up Internet explorer. I encounter 3 issues:
1) {{ blah }} does not translate into blah blah, I see {{ blah }} as if the js is ignored. same for the ng-src of the img. It is ignored and I don't see the image.
2) the 2 buttons are not colored in green as I expect it to be from the bootstrap css. I tried it in jsFiddle and did see them as green but when I tried again now, they were regular, not sure what did I do wrong.
3) Routing: I want to browse to Google/Yahoo when navigating to specific url g and y using the 2 buttons. When I open the live preview, the url is: http://127.0.0.1:58164/index.html so how can I route this correctly? http://127.0.0.1:58164/index.html/g won't work.
I'm kinda lost here, not sure if the problem is my code, the browser of the live preview though the JS didn't work also in jsFiddle...
1) You're injecting the dependencies into your controller incorrectly - you need a string for each argument of the function. It's an easy mistake to make!
app.controller('testSrc', ['$scope,$location', function ($scope, $location) { // Wrong
app.controller('testSrc', ['$scope', '$location', function ($scope, $location) { // Right
2) You've misspelled the class name in your buttons. 'sucess' should be 'success'.
<button class="btn btn-sucess" ng-click="goYahoo()">Yahoo</button>
^^^^^^
3) There's numerous things wrong with your routing:
You haven't included the ngRoute module in your HTML - it hasn't been included in the base Angular package for a long time now.
Once that's done, you need to add it as a dependency: var app = angular.module("app", ["ngRoute"]); and add an ng-view tag to your HTML.
By default, the router will use 'hashbangs' for the URL - so the URL would be something along the lines of `http://127.0.0.1:58164/index.html#/g. If this isn't acceptable for you, I'd look into HTML5 mode.
All that being said, I don't think ngRoute will help you accomplish what you're trying to do. The router is designed to route through the pages of your app, not to external sites, so trying to load HTML from another domain probably won't work.
I'd recommend running through the official Angular tutorial if you haven't already - it covers all this stuff quite well. I'd also recommend Shaping Up With Angular.js on Code School, if you would prefer something a bit more hands-on.
Using Meteor 0.9.3 and iron:router 1.0.0-pre2, this error shows on the console even though iron:layout was installed, see below:
willems-mini:iron willem$ meteor add iron:router#=1.0.0-pre2
added iron:location at version 1.0.0-pre2
added iron:dynamic-template at version 1.0.0-pre2
added iron:router at version 1.0.0-pre2
added iron:layout at version 1.0.0-pre2
added iron:middleware-stack at version 1.0.0-pre2
added iron:url at version 1.0.0-pre2
added iron:controller at version 1.0.0-pre2
added iron:core at version 1.0.0-pre2
iron:router: Routing specifically designed for Meteor
There are no other packages, just the defaults for meteor:
willems-mini:iron willem$ meteor list
autopublish 1.0.0 Publish the entire database to all clients
insecure 1.0.0 Allow all database writes by default
iron:router 1.0.0-pre2 Routing specifically designed for Meteor
meteor-platform 1.1.1 Include a standard set of Meteor packages in your app
I am trying to run a very simple app:
1 javascript file:
Router.route('/', function () {
this.render('home');
});
if (Meteor.isClient) {
Template.home.events({
'click button': function () {
console.log('click!');
}
});
}
and 1 html file:
<head>
<title>iron router test</title>
</head>
<body>
{{> defaultLayout}}
</body>
<template name="defaultLayout">
<header>
{{> yield "header"}}
</header>
<article>
{{> yield}}
</article>
<footer>
{{> yield "footer"}}
</footer>
</template>
<template name="home">
{{#contentFor "header"}}
<button>click header</button>
{{/contentFor}}
<button>click</button>
{{#contentFor "footer"}}
<button>click footer</button>
{{/contentFor}}
</template>
This is not how iron:router layouts are supposed to work.
Get rid of your explicit inclusion of the layout in the body :
{{! this is WRONG, remove the body tag altogether }}
<body>
{{> defaultLayout}}
</body>
The place where your specify the layoutTemplate is in the RouteController :
Router.route('/', function () {
this.render('home');
},{
layoutTemplate:"defaultLayout"
});
Declaring explicitly your RouteControllers is usually a nicer design pattern.
lib/router.js
Router.route("/",{
// give the route a name so it figures out itself to use :
// - HomeController
// - a template name "home"
name:"home"
});
lib/controllers/lib/default-layout.js
DefaultLayoutController=RouteController.extend({
layoutTemplate:"defaultLayout"
});
lib/controllers/home.js
HomeController=DefaultLayoutController.extend({
//
});
Well, like your error says you're missing an iron layout.
Could look something like this in your lib/router.js or wherever you hold your router code:
Router.configure({
layoutTemplate: 'layout',
loadingTemplate: 'loading'
});
And so the respective <template name="layout"> should be there.
I'm receiving an error with Iron Router 0.7.0 on Meteor 0.8.0.
Within the UI.Compenent.lookup function in blaze-layout's layout.js, the following error is triggering:
Uncaught Error: Couldn't find a Layout component in the rendered component tree
It's hard to know exactly what is causing this error and what isn't working because of it. Any ideas?
Thanks in advance.
I just got the same error, for me it was caused by including my layout template within <body>, and specifying it as the layoutTemplate option. To fix it, I removed the include from <body>.
Here is a before and after of my code;
example.html (before)
<head>
<title>example</title>
</head>
<body>
{{>layout}}
</body>
<template name="layout">
<div>{{>yield}}</div>
</template>
example.js (before)
if(Meteor.isClient) {
Router.configure({
layoutTemplate: 'layout'
});
}
example.html (after)
<head>
<title>example</title>
</head>
<body>
</body>
<template name="layout">
<div>{{>yield}}</div>
</template>
example.js (after -- same as before)