I was following with along the Ember Guides: Defining Your Routes and added a customized index route in my Ember app; which sets a controller title property:
// app/routes/index.js
import Ember from 'ember';
export default Ember.Route.extend({
setupController: function(controller) {
// Set the IndexController's `title`
controller.set('title', 'Tagged! - home');
}
});
I then added an output for the title in app/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{title}}</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{content-for 'head'}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/tagged-ember.css">
{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
<script src="assets/vendor.js"></script>
<script src="assets/tagged-ember.js"></script>
{{content-for 'body-footer'}}
</body>
</html>
However instead of the expected output I get {{title}} in the browser title bar. Why is HTMLbars not outputting the variable?
I'm using the ember-cli (ember 1.13.3) and running the server with ember server. I can see the controller property in the ember inspector.
The index.html file is outside the scope of the application controller/route/template, ember-cli-document-title solves the issue for you.
If you don't want to use it you can create an in-repo-addon that makes use of something like {{content-for 'document-title'}}.
Related
I am having trouble loading snipcart correctly, it picks up the api key on localhost and shows the number of items in cart however when deployed to netlify, it will briefly flash up the number of items in cart when the page is loaded indicating that the api key is correct however it then comes up with the error
public API key not found. Attribute data-api-key must be set on #snipcart tag.
I am using react to render it, and have taken it down to the minimal boilerplate to see if anything in react could be causing this but I still have the same problem.
moving <div hidden id="snipcart" data-api-key={{ API_KEY }}></div> to app.js file and it works, but in index.html it doesn't work
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href ="https://fonts.googleapis.com/css2?family=Open+Sans&family=Lexend+Zetta&family=Poppins:wght#400;500;700&family=Shadows+Into+Light&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://app.snipcart.com">
<link rel="preconnect" href="https://cdn.snipcart.com">
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.23/default/snipcart.css" />
</head>
<body>
<div id="root"></div>
<script async src="https://cdn.snipcart.com/themes/v3.0.23/default/snipcart.js"></script>
<div hidden id="snipcart" data-api-key={{ API_KEY }}></div>
<script src="./index.tsx"></script>
</body>
</html>
Putting this in your html doesnt work since the {{API_KEY}} is I assume from your framework. Since the html code is not compiled using your framework, it doesnt do anything with the <div hidden id="snipcart" data-api-key={{ API_KEY }}> tag.
To make this work, put your api key instead of the {{API_KEY}} variable.
Cheers,
Lea from Snipcart
I am struggeling to understand how exactly browsers are handling ES6 modules. I thought, that modules will only be executed the first time they are imported([modules: javascript.info][1].
Let's say i have following project structure:
js
admin.js
customers.js
index.js
customers.html
index.html
Both index.js and customers.js import the same module admin.js. When i import index.js in index.html the name of admin is changed from "John" to "Pete" and logged as expected.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modules</title>
</head>
<body>
<nav>Customers</nav>
<h1>Homepage</h1>
<script type="module" src="js/index.js"></script>
</body>
</html>
In customers.html i expected the admin's name to be "Pete" as well:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Customers</title>
</head>
<body>
<nav>Home</nav>
<h1>Customers</h1>
<script type="module" src="js/customers.js"></script>
</body>
</html>
But instead of "Pete", "John" is logged again.
Modules i used:
// admin.js
export let admin = {
name: "John",
};
//index.js
import { admin } from "./admin.js";
admin.name = "Pete";
console.log(admin.name); // Pete
// customers.js
import { admin } from "./admin.js";
console.log(admin.name); // Pete
[1]: https://javascript.info/modules-intro#a-module-code-is-evaluated-only-the-first-time-when-imported)
As Felix said above, each page render/rerender would then reload all assets. This is the difference between a Single Page Application and a Multi Page Application. You're working with an MPA, so you would need some form of data persistence between pages, such as databasing the data server side and requesting it on each page load, or placing the necessary persisted data in something like localStorage or sessionStorage for access between pages.
I am using JavaScipt ES6 with Node. I am using visual studio code. I am getting this error when I run npm start:
The error is:
× C:\Users\markp\source\repos\bioinvisionTest\index.html:1:31: Imports and requires are not supported inside inline <script> tags yet
in other programs the import works. This one it doesn't. All that is in the program is this:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="demo"></div>
<script>
import TestComponent from "./components/Testcomponent"
</script>
</body>
</html>
and in the components folder there is file called Testcomponent js that contains this:
function TestComponent() {
console.log("test component js")
}
export default {
TestComponent
}
return key is somting which you can't simply ignore if it's multiline codes.
If you are uinsg Creaet-react-app as generator then i will recommend use APP.js as base and inject your component in that file for now. Later you can redesign .
If you are using only HTML and JS file then you should import react and react-dom library in your index.html file .
One page React App , place in your html file.
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
class Greeting extends React.Component {
render() {
return (<p>Hello world</p>);
}
}
ReactDOM.render(
<Greeting />,
document.getElementById('root')
);
</script>
Modules are natively suppported
refer MDN docs
Try adding type="module" to your script tag.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="demo"></div>
<script type="module">
import TestComponent from "./components/Testcomponent"
</script>
</body>
</html>
i am following this tutorial https://v2.vuejs.org/v2/guide/#Declarative-Rendering. the page works fine without error on console but i cant change the message via console to showing "app2.message" and give me error "#app2 is not defined". its not working like they said
We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now reactive. How do we know? Open your browser’s JavaScript console (right now, on this page) and set app.message to a different value. You should see the rendered example above update accordingly.
here is my script:
window.addEventListener('load',
function() {
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
}, false);
this is how i include the js
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>3R Inventory | #yield('title')</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{{ URL::to('css/app.css') }}">
<script type="text/javascript" src="{{ URL::to('js/app.js') }}"></script>
<script type="text/javascript" src="{{ URL::to('/js/tigaer.js') }}"></script>
</head>
I have a very basic AngularJS app, from which I am trying to resolve the below error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.9/$injector/modulerr?p0=HelloWorld&p1=Error…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.9%2Fangular.min.js%3A19%3A463)
All the online references I have found lead to correcting improper use of ng-app in one way or another, however I find that my code is as close as vanilla and correct as it can possibly get.
So being that this is a basic issue and I cannot seem to find the solution for it, could anyone please enlighten me as to the obvious mistake?
JavaScript
var myApp = angular.module("HelloWorld", []);
myApp.controller("mainController", function($scope){
console.log($scope);
});
HTML
<!DOCTYPE html>
<html lang="en-us" ng-app="HelloWorld">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Hello World with AngularJS!</title>
</head>
<body>
<div ng-controller="mainController">
Hello world!
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
</body>
</html>
If you are trying to make this example in plunkr for example, don't forget to reference your script file, script.js.
Check here.
I added <script src="script.js"></script>. Without it I get the exact error you describe. Basically Angular can't find a corresponding module declaration for the ng-app="HelloWorld" application.
So don't forget to include your actual application JS, containing the angular.module part.
You get this error since you are using ng features before importing Angular and you are not importing the file where you initialize your app module.
Do as shown below:
HTML:
<!DOCTYPE html>
<html lang="en-us" ng-app="HelloWorld">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js">
</script>
<script type="text/javascript" src="app.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Hello World with AngularJS!</title>
</head>
<body>
<div ng-controller="mainController">
Hello world!
</div>
</body>
</html>
App.js:
var myApp = angular.module("HelloWorld", []);
myApp.controller("mainController", function($scope){
console.log($scope);
});
I hope I've been helpful.