/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>
Related
I am using Yeti Launch and I want to use expressions to display page information on each page.
For example, I want to display the page title and some other content specific to that page.
So the homepage would be {title: "homepage"} but I can't figure out how to have the foundation project print/display this.
Here is how I have my homepage file
{{!-- This is the base layout for your project, and will be used on every page. --}}
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
<link rel="stylesheet" href="{{root}}assets/css/app.css">
</head>
<script>
var context = {title:"Homepage | Hey this is working"};
</script>
<body>
<div id="siteContainer" class="cover">
<div class="row">
<header>
<h1>Example</h1>
</header>
</div>
<div id="navigation">
<!-- eo // navigation -->
<section id="contentWrapper">
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}} {{> body}}
</section>
<!-- eo // section -->
</div>
<!-- eo // siteContainer -->
<script src="{{root}}assets/js/app.js"></script>
</body>
</html>
How foundation sets up the project folders
src
assets - /img/ - /js/ - /scss/
data
layouts
pages
partials
styleguide
Where should my data be stored? and How do I display or make the call to pull the data to that particular page?
Thanks!
Found the answer.
I have to define my variables at the top of the page template.
I was doing it wrong. I was adding my variables to the partial file instead of the the page template.
Reference:
http://foundation.zurb.com/sites/docs/panini.html#custom-data
http://jekyllrb.com/docs/frontmatter/
I'm looking for a "live code" repository (e.g., jsBin, jsFiddle, CodePen, plunkr, etc.) template useful for sandboxing (i.e., "posting") Polymer questions about the firebase-collection or firebase-document.
In other words, I'm building a Polymer app using a Firebase backend and I need a template to use for posting questions to this site.
For example, here is the template I use to post Polymer questions. Is there one that anyone knows of that can also support questions about the firebase-collection or firebase-document elements? (I'm guessing this would require a firebase with public read/write access.)
http://jsbin.com/sitomotoji/edit?html,output
<!doctype html>
<head>
<meta charset="utf-8">
<!---- >
<base href="https://polygit.org/components/">
Toggle below/above as backup when server is down
<!---->
<base href="https://polygit2.appspot.com/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<paper-button on-tap="_handleTap">Click Me</paper-button>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
},
_handleTap: function() {
alert('User clicked me!');
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
http://jsbin.com/xojoxubigi/edit?html,output
<!doctype html>
<head>
<meta charset="utf-8">
<!---- >
<base href="https://polygit.org/components/">
<!---- >
Toggle below/above as backup when server is down
<!---->
<base href="https://polygit2.appspot.com/components/">
<!---->
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="firebase-element/firebase-collection.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<p>
<paper-button on-tap="_handleClick">Click Me</paper-button>
</p>
<!---->
<firebase-collection
location="https://dinosaur-facts.firebaseio.com/dinosaurs"
data="{{dinosaurs}}"></firebase-collection>
<template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
<div>
[[dinosaur.height]]
</div>
</template>
<!---->
</template>
<script>
(function(){
Polymer({
is: "x-element",
_handleClick: function() {
console.log('You clicked me!');
}
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
I'm trying to set a cookie in my local machine using the jquery.cookie plugin. I already downloaded the jquery files that are needed and create a html file with this code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.11.2.min.js "></script>
<script type="text/javascript" src="jquery.cookie.js "></script>
</head>
<body>
<script>
$(document).ready(function(){
$.cookie('name','value');
});
</script>
</body>
</html>
But the cookie it's not set in Google Chrome. What is wrong? Thanks.
I figured out how to do this: First the html file have to be open in the server. I already have apache configured so I open the file with the localhost. Then the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="../javaframeworks/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../javaframeworks/jquery-cookie/src/jquery.cookie.js"></script>
<link rel="stylesheet" type="text/css" href="../css/shadowbox.css" />
<script type="text/javascript">
if ($.cookie('backdrop')==null){
$(document).ready(function(){
$('.backdrop, .box').animate({'opacity':' 0.85'}, 250, "linear");
$('.box').animate({'opacity':' 1.00'}, 250, "linear");
$('.backdrop , .box').css('display', 'block');
$('.close').click(function(){
close_box();
});
$('.backdrop').click( function(){
close_box();
});
});
$.cookie('backdrop','1');
}
function close_box(){
$('backdrop, .box').animate({'opacity':'0'},250, 'linear',function(){
$('.backdrop , .box').css('display', 'none');
});
}
</script>
</head>
<body>
<div class="backdrop"></div>
<div class="box">
<div class="close"><img src="../img/big_close.png"></div>
<div class="contentbox">
<img src="../img/warning.jpg" id="aviso">
<h4 id="msg"> Está página está em fase de desenvolvimento</h4>
</div>
</div>
</body>
</html>
The goal of this code is to show a div with a message in front of the page content and put an opact background. But only the first time the user open the page.
all. I'm new to foundation.
I tried to make a dropdown example, but it didn't work at all.
--all.scss--
.test{
#drop2{
#include dropdown-container;
}
}
--test.html--
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<title>test</title>
<meta content='' name='description'>
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
<link href='css/all.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="test">
<a data-dropdown='drop2' href='#'>Has Content Dropdown</a>
<div class='f-dropdown content' data-dropdown-content id='drop2'>
<p>
Some text that people will think is awesome!
Some text that people will think is awesome!
Some text that people will think is awesome!
</p>
</div>
</div>
<script src='js/modernizr.js' type='text/javascript'></script>
<script src='js/jquery.js' type='text/javascript'></script>
<script src='js/fastclick.js' type='text/javascript'></script>
<script src='js/foundation.js' type='text/javascript'></script>
<script src='js/foundation.dropdown.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).foundation();
</script>
</body>
</html>
The browser shows the text "Has Content Dropdown", but nothing happens when I click the link.
I wonder that I must misunderstand how to use the dropdown component, but can't find what is wrong.
What's wrong with the program? Please help.
foundation 5.4.6
using Middleman and sass
When I add this script to a plain HTML file's HEAD section
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
and I run this script on the body onload,
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
then I see the Google map just fine.
However, the same does not work when in a Django template. (Yes, I am new to Django :)
I get all the code in the initialize function to run, but no map shows up. Page stays blank.
I assume it has something to do with Django, and the GAE dev server, and how the Google Maps js API is referenced, but I don't know how to fix.
Thanx much.
Edit:
My Django template looks like this (There are no Django specific tags or anything yet.)
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
dir="ltr"
xml:lang="en"
lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="/site_media/css/reset.css" />
<link rel="stylesheet" type="text/css" href="/site_media/css/main.css" />
<script src="/site_media/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
$(document).ready(function(event) {
initialize();
});
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<center>
<div id="map_canvas" style="width:60%; height:70%;">Why the heck is the map not showing?</div>
</center>
</body>
</html>
And the rendered HTML source of that template from the browser looks like this:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
dir="ltr"
xml:lang="en"
lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="/site_media/css/reset.css" />
<link rel="stylesheet" type="text/css" href="/site_media/css/main.css" />
<script src="/site_media/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
$(document).ready(function(event) {
initialize();
});
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<center>
<div id="map_canvas" style="width:60%; height:70%;">Why the heck is the map not showing?</div>
</center>
</body>
</html>
Your DOCTYPE is causing the problem. If I remove that from your code, then the map displays.
There are some threads on the Google Maps JavaScript API v3 Group that discuss this problem.
I don't think your problem is (directly) related to the GAE development server or Django - it looks like your page's HTML is loading just fine.
I suspect your problem may be the jQuery reference. Perhaps jQuery is not being loaded, and thus your script stops executing when it tries to access $(document) but fails because a ReferenceError is thrown.
I would check that your link to load the jQuery library is working by manually accessing it in your browser (i.e., browse to http://localhost:8080/site_media/js/jquery.min.js (or wherever you are running your development server) and make sure it works). If not, then fix your app.yaml file so that it is properly setup to serve /site_media/js/jquery.min.js.
I've had this I think and I fixed it by just doing the Google Maps initialize from google's own method:
google.setOnLoadCallback(initialize);
I know I tried to do this (by default) in jQuery's ready but that didn't work for some reason.