Hello I have this simple index file:
<?php use Cake\Routing\Router; ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html">
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>
</head>
<body unresolved>
<template id="app" is="dom-bind" >
<h1 on-click="{{stateChange}}">Holaaa</h1>
</template>
<script>
var app = document.querySelector('#app');
app.stateChange= function(){
console.log("stateChange");
};
</script>
</body>
</html>
I'm getting this error:
[dom-bind::_createEventHandler]: listener method `{{stateChange}}` not defined
I have a working app with Polymer where everything works nicely. But this simple example is not working! Why!?
Why? What did I miss?
I have tried defining the stateChange function with app. and without the app. too with no success.
I have also tried wrapping it in dom change event like the documentation points out but not working
app.addEventListener('dom-change', function() {
stateChange= function(){
console.log("stateChange");
};
});
I have tried defining the stateChange function iside the dom-change event with app. with this. and without anything. Nothing works!
Remove the curly brackets.
<h1 on-click="stateChange">Holaaa</h1>
Compatibility note: The syntax differs from 0.5, which required curly brackets ({{}}) around the event handler name.
Source: https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated-listeners
Related
I have a django project and I want to start adding Vue.js elements into it, but there is a big overarching issue before I can really start in that custom delimiters (template tags) do not work in the firefox browser only Chrome, I can change them from curly braces to square brackets, but in firefox it just renders the code not the message. The following code is not part of my django project, it is just example code to demonstrate the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Learning Vue.js</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" />
<p>Hello [[ message ]]</p>
</div>
<script>
new Vue({
delimiters: ["[[","]]"],
el: '#app',
data() {
return {
message: 'Hello World'
};
}
});
</script>
</body>
</html>
So this code renders the following in Chrome:
Hello World!
And in Firefox, it renders the code:
[[ message ]]
I'm assuming there is a fix for this, as I almost never see rendered code in websites and I'm assuming Vue is popular, how do other developers get around this issue?
Ideally, I want my index.html from this:
<!-- app/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Program With Erik Blog Example</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/example1.css">
{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
<script src="assets/vendor.js"></script>
<script src="assets/example1.js"></script>
{{content-for 'body-footer'}}
</body>
</html>
into production code. But for some strange reason, each time I call ember build, I do not get the expected production-looking code. Instead I get something like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
.
.
.
<!-- lots of code -->
It's the default firebase page!
What is happening? I've deleted the picture multiple times. But each time I call ember build it builds the firebase default page rather than my ember app index.html.
I'm new to ember and I've been fiddling around heavily with the config/environment.js and the firebase.js. Any thoughts on why this might be happening?
On initialising a firebase app, one is prompted:
? What do you want to use as your public directory? (public)
make sure to set the dist folder as the public directory, that is
? What do you want to use as your public directory? (public) dist
using the default public will cause the above behavior no matter how many times you build your Ember app.
To fix the problem, re-initialise the firebase app with the firebase init command, and set the right folder as the public directory.
I am wanting to use Google Adsense with an Ember site I'm working on. However, if I just copy the code block I get from Google I get this error:
Error: `SCRIPT` tags are not allowed in HTMLBars templates (on line 3)
After doing some searching, it seems some people has the same issue, but I have not found a solution for this. Does anybody have any ideas?
Put external scripts in your app/index.html file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TmpApp</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/tmpapp.css">
{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
<script src="assets/vendor.js"></script>
<script src="assets/tmpapp.js"></script>
{{content-for 'body-footer'}}
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-12345678-1', 'auto'); // get the exact number from your Google Analytics admin screen
ga('send', 'pageview');
</script>
</body>
</html>
Notice the script is below the content-for 'body-footer'? Remember to use your own Google Analytics code from your admin section in Google Analytics.
I'm trying to mimic template inheritance as found in Django with a Grails app. I want to be able to define a '_header.gsp' which includes all the shared resources across the app:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>${title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
%{--Shared Styles--}%
<link rel="stylesheet" href="${resource(dir: 'app/shared/css/bootstrap', file: 'bootstrap.min.css')}" type="text/css">
%{--Shared Libraries--}%
<script src="${resource(dir: 'lib/jquery', file: 'jquery.js')}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
%{--View-specific styles--}%
<g:each var="style" in="${styles}">
<link rel="stylesheet" href="${style}" type="text/css">
</g:each>
%{--View-specific scripts--}%
<g:each var="include" in="${includes}">
<script src="${include}" type="text/javascript"></script>
</g:each>
For each specific view template I will include this _header.gsp with a dictionary to fill in the view-specific requirements:
<g:render template="/header"
model="[
title:'Alerts',
styles:[
'${resource(dir: "app/stuff/css", file: "other.css")}',
'${resource(dir: "app/stuff/css", file: "second.css")}'
],
includes:[
'${resource(dir: "app/stuff/src/main/js/", file: "app.js")}',
'${resource(dir: "app/stuff/src/main/js/", file: "filters.js")}'
]
]" />
This is not working, and I'm sure my syntax is wrong somewhere. Can you define a '$resource(dir)' path inside of a g:each like I have? Perhaps I need to use g:link? Can this be done with Grails?
It sounds like you just need to use the resources tag. Define your 'resources' in ApplicationResources.groovy. Then, in your layout include the r:layoutResources tag, and finally, in the gsp specify the resource modules you want to include on that page.
In ApplicationResources.groovy
modules = {
application {
dependsOn 'jquery'
resource url: 'css/other.css'
resource url: 'css/second.css'
resource url: 'js/bootstrap.js'
}
charting {
//Charting is dependent on the 'application' resource module above,
// so it will include everything from the application and the
// charting css and js.
dependsOn 'application'
resource url: 'css/chart.css'
resource url: 'js/pie-chart.js'
}
reports {
//Completely separate so there is no dependsOn.
// Like 'application' module, it will only include the resources below.
resource url: 'css/pdf.css'
resource url: 'js/interactive-report.js'
}
}
In the /grails-app/layouts/main.gsp
<head>
...
<r:layoutResources />
</head>
<body>
...
<r:layoutResources />
</body>
In the /grails-app/views/someDomain/
list.gsp
<head>
...
<r:require modules="application" />
</head>
<body>
...
</body>
report.gsp
<head>
...
<r:require modules="reports" />
</head>
<body>
...
</body>
charts.gsp
<head>
...
<r:require modules="charting" />
</head>
<body>
...
</body>
/app.js
var Welcome = Ember.Application.create({});
Welcome.person = Ember.View.extend({
personName: 'Andrew'
});
Here is the content of the index.html, part of the view:
/index.html
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script type="text/x-handlebars">
{{personName}}
</script>
<script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
<script src="js/libs/ember-1.0.pre.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
My question is why isn't it displaying anything? Shouldn't it render the content of personName?
UPDATE:
I am using the Starter Kit from Ember. It already has a view defined. I just added one more property to the object but still it is not visible to the view.
App.MyView = Em.View.extend({
mouseDown: function() {
window.alert("hello world!");
},
name: 'Andrew'
});
And the view part in .html is:
<script type="text/x-handlebars">
{{#view App.MyView}}
<h1>Hello world {{name}}!</h1>
{{/view}}
</script>
Since the event works, isn't the name supposed to be accessible?
Since 1.0, the views preserve their context.
VIEW CONTEXT CHANGES
In apps built on earlier version of Ember (before 1.0), the {{#view}} helper
created a new context for the view. This meant that you had to explicitly set the
context on them.
In 1.0, we've made this a bit simpler. The {{#view}} helper no longer changes
the context, instead maintaining the parent context by default. Alternatively,
we will use the controller property if provided. You may also choose to directly
overridethe context property. The order is as follows:
Specified controller
Supplied context (usually by Handlebars)
parentView's context (for a child of a ContainerView)
In the event that you do need to directly refer to a property on the view, you
can use the view keyword, i.e. {{view.myProp}}.
So, for your example, tou have to use {{view.name}}
<script type="text/x-handlebars">
{{#view App.MyView}}
<h1>Hello world {{view.name}}!</h1>
{{/view}}
</script>