First, I'm a new user so if this is not the place to ask this question or the question is leaking with details please inform me and I'll do the required adjustments.
I'm new to Ember.JS and I've recently started learning by reading this getting started guide.
In the early stages of this guide I'm already dealing with the next problem:
All stages worked well until the stage where I need to update my index.html to wrap the inner contents of <body> in this Handlebars script tag:
<script type="text/x-handlebars" data-template-name="todos">.....</script>
as asked in the 5th step of this guide.
After I do so my window ends-up displaying nothing (except for the background image)
Here is how my files looks like (hierarchic):
https://dl.dropboxusercontent.com/u/24149874/image.png
And those are the content of the relevant files from the previous steps in the guide:
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ember.js • TodoMVC</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script type="text/x-handlebars" data-template-name="todos">
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input type="text" id="new-todo" placeholder="What needs to be done?" />
</header>
<section id="main">
<ul id="todo-list">
<li class="completed">
<input type="checkbox" class="toggle">
<label>Learn Ember.js</label><button class="destroy"></button>
</li>
<li>
<input type="checkbox" class="toggle">
<label>...</label><button class="destroy"></button>
</li>
<li>
<input type="checkbox" class="toggle">
<label>Profit!</label><button class="destroy"></button>
</li>
</ul>
<input type="checkbox" id="toggle-all">
</section>
<footer id="footer">
<span id="todo-count">
<strong>2</strong> todos left
</span>
<ul id="filters">
<li>
All
</li>
<li>
Active
</li>
<li>
Completed
</li>
</ul>
<button id="clear-completed">
Clear completed (1)
</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
</footer>
</script>
<script src="libs/jquery-1.10.js"></script>
<script src="libs/handlebars.js"></script>
<script src="libs/ember.js"></script>
<script src="libs/ember-data-0.13.js"></script>
<script src="application.js"></script>
<script src="router.js"></script>
</body>
</html>
application.js
window.Todos = Ember.Application.create();
router.js
Todos.Router.map(function () {
this.resource('todos', { path: '/' });
});
Of course, I tried to find an answer in other relevant posts but nothing I found was helpful.
Appreciate your help!
I guess the only piece missing here is the application template itself.
Try to define one like this:
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="todos">
...
</script>
The {{outlet}} here is important since you need to tell ember where to inject your todos template.
See here for a working example, the css file is not included so it's normal that everything is screwed up, but the basic setup is working.
Hope it helps.
In addition to the jQuery file, even handlebar file's name is also incorrectly written in the index.html file.
Modify the index.html file with following code:
<script src="js/libs/jquery-1.10.2.min.js"></script>
<script src="js/libs/handlebars-1.0.0.js"></script>
Further in the next step, note the js file is named js/app.js or js/application.js since the code at github has file name as app.js whereas the website shows file name as application.js.
FWIW, I had the same problem, and it turned out the jQuery file in my js folder was a different version than the one called for in the tutorial's html. It was a simple error, but one that took me a little too long to notice.
Related
I'm using ember.js with handlebars, and it seems external URL cannot be reached without a script. I put a link to www.google.com to test and it never fires! Is there something I am missing on?
<script type="text/x-handlebars" data-template-name="subusers">
<div class="click-nav" {{action 'toggleDdSubusers'}}>
<ul class="no-js" >
<li>
<a class="clicker">
{{render 'currentsubuser'}}
</a>
<ul class="filter-options">
{{#each subuser in model}}
{{#unless (equals subuser.id currentSubuserInfos.id)}}
<li>
<a href="http://www.google.com">
<span class="profileimg">{{{subuser.profileImage}}}</span>{{subuser.name}}<span class="numbers"> ({{subuser.openedConvCount}})</span>
</a>
</li>
{{/unless}}
{{/each}}
</ul>
</li>
</ul>
</div>
</script>
I still don't know why I got this behavior on my app. What I did to solve my problem is I put an action on my li and send the wanted redirect URL as a function parameter.
In this action, I simply manually redirect with : window.location.href = paramUrl.
I'm trying to implement an offcanvas to a site using zurb's foundation framework, for mobile viewing, and just copied the code for it from the documentation, but it just doesn't work.
the code is the following:
<script src="/js/vendor/custom.modernizr.js"></script>
<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</head>
<body>
<!--offcanvas begin-->
<div class="off-canvas-wrap">
<div class="inner-wrap">
<nav class="tab-bar show-for-small">
<a class="left-off-canvas-toggle menu-icon">
<span>Foundation</span>
</a>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>The Psychohistorians</li>
<li>The test!</li>
</ul>
</aside>
<section class="main-section">
<!--offcanvas begin-page-content-->
<!--content-->
<!--offcanvas end-page-content-->
</section>
<a class="exit-off-canvas"></a>
</div><!--inner-wrap-->
</div><!-- off-canvas-wrap -->
<!--offcanvas end-->
</body>
Am I doing something wrong?
In some instances this can be fixed by supplying the HTML data attribute data-offcanvas
<div class="off-canvas-wrap" data-offcanvas>
See this fiddle for the working changes to your markup: http://jsfiddle.net/vooaqtxt/
I have replicated the problem, and found that moving jquery, foundation.min.js resources and the initialization call:
$(document).foundation();
to just before the closing </body> tag fixed the problem (leave modernizr.js in the head).
Edit: As #Jigar pointed out offcanvas.js does not need to be loaded externally.
p.s. In just about every case, it's best to place all your script references at the end of the page, just before </body>
Unfortunately, Ribena's answer is not working anymore, at version 5.2.3, though it was at version 5.0.3.
For it to work now, the trigger javascript needs to be put:
or at the end of the <body> tag as it said in the docs, like Daniel said
or inside the <head> this way (using JQuery):
<script>
$(window).bind("load", function () {
$(document).foundation();
});
</script>
Update to Foundation 5.0.3 and your code should work fine again.
You are missing the href="#" on your toggle button link
If the href="#" is missing, it will not work on mobile devices.
This is what your nav should look like:
<nav class="tab-bar show-for-small">
<a class="left-off-canvas-toggle menu-icon" href="#">
<span>Foundation</span>
</a>
</nav>
Just switched my rails project to test Zurb Foundation 5 and now the toggle-topbar menu is not working.
When the viewport is small, the top bar menu items disappear and the menu icon is displayed as before, but when I click on the menu icon nothing occurs.
I have the following code to display a top-bar menu.
<nav class="top-bar">
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon">
<a>{href: "#"}
<span>Menú</span></a>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li>
<a class="i fi-home">{href: "/ui/home"}
Inicio</a></li>
<li>
<a>{href: "/ui/wine_reviews"} Críticas de Vinos</a></li>
<li>
<a>{href: "/ui/wine_tastings"} Catas y Maridajes</a></li>
<li>
<a>{href: "/ui/blogs"} Noticias</a></li>
</ul>
<ul class="right">
<li>
<a>{href: "#"}
<i class="fi-lock"></i>
Club TastaVi</a></li>
</ul>
</section>
</nav>
It's a top-bar menu contained in my grid.
I had the same problem with the top bar. After comparing zurbs code with mine I noticed the difference.
<nav class="top-bar" data-topbar>
I was missing the data-topbar. After adding that mine topbar started working correctly.
The problem appears to be in the Foundation.topbar.js file. The following section of code
breakpoint : function () {
return matchMedia(Foundation.media_queries['medium']).matches;
}
needs to be changed to
breakpoint : function () {
return !matchMedia(Foundation.media_queries['topbar']).matches;
}
Just an FYI, there is another bug in the topbar that breaks scrolling. You need to change line 38 of foudation.topbar.js from:
self.settings.stick_topbar = topbar;
to
self.settings.sticky_topbar = topbar;
This has been fixed in the 5.0.3 release but as of last night, the Foundation website was still serving 5.0.2
Here's the minimum you need to get it working... I was missing $(document).foundation();...
<html>
<head>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/css/foundation.min.css">
</head>
<body>
<nav class="top-bar" data-topbar="" data-options="is_hover: false" role="navigation">
<ul class="title-area">
<li class="name">
<h1>Mobile Parent Links</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section" style="left: 0%;">
<ul class="left">
<li class="has-dropdown not-click">Item 1
<ul class="dropdown">
<li class="title back js-generated"><h5>Back</h5></li>
<li class="parent-link show-for-small">
<a class="parent-link js-generated" href="http://foundation.zurb.com/docs/components/topbar.html">Item 1</a></li>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation/foundation.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation/foundation.topbar.min.js'></script>
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
</body>
</html>
I've had same problem before. For me, it works when I include the topbar.js inside the body and under the foundation.js.
So, instead of
<head>
<script src="../js/foundation.js"></script>
<script src="../js/foundation/foundation.topbar.js"></script>
....
</head>
Try to put the topbar.js inside the body like this
<head>
<script src="../js/foundation.js"></script>
....
</head>
<body>
<script src="../js/foundation/foundation.topbar.js"></script>
....
</body>
I experienced a similar problem with Foundation 5.1.1. None of the above suggested fixes were applicable for me (I already had the data-topbar attribute, and the breakpoint function was already updated in this release of Foundation). I'm testing my code-in-development with Firefox on MacOS. My Javascript includes are at the end of the body.
In my case, the problem was fixed by upgrading Zurb to version 5.2.1.
I experienced that issue since yesterday evening & going through all of such threads, nothing trick really helped. At last, following are the steps that helped me resolving the issue:
Re-Downloaded updated Complete Foundation.
Included html meta(viewport) tag that I was missing earlier.
I'm including the files at my page in this way:
<link rel="stylesheet" href="/css/foundation/foundation.css"/>
<link rel="stylesheet" href="/css/foundation/app.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="/js/jquery-1.11.2.min.js"></script>
<script src="/js/foundation/foundation.js"></script>
<script src="/js/foundation/foundation.topbar.js"></script>
Called Foundation function in jquery rather than js as below:
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
0 release!
I am having a weird problem rendering CSS under Ember.js. It is weird because the just works fine after manually refreshing the page, and in plain HTML without Ember. I have tried different browsers and different CSS libraries and all the same.
I just want to render tabs inside a handlebars template, I have tried both Zurb Foundation sections and jQuery-ui tabs and both work only after manual page refresh.
I have tried to reproduce the problem with JSBin but it didn't work. I am using the example code from both libraries to do this.
Here is my HTML with Zurb Foundation 4.3: (referencing js and css libraries omitted for brevity)
<html>
<body>
<script type="text/x-handlebars">
<nav class="top-bar" data-options="is_hover=false">
<ul class="title-area">
<li class="name">
<h1>Main</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="left show-on-small">
<li>{{#linkTo 'families'}}Families{{/linkTo}}</li>
</ul>
<ul class="left">
<li>{{#linkTo 'charities'}}Charities{{/linkTo}}</li>
</ul>
</section>
</nav>
<div>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="families">
<div class="row display">
<div class="large-3 columns">
<span>{{#linkTo 'families.details'}}list{{/linkTo}}</span>
</div>
<div class="large-9 columns">
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="families/details">
<div class="row">
<span>details</span>
</div>
<div class="row">
<section class="section-container auto" data-section data-section-small-style>
<section class="active" >
<p class="title" data-section-title>Family Info</p>
<div class="content" id="panel1" data-section-content>
<span>Family Info goes here</span>
</div>
</section>
<section>
<p class="title" data-section-title>Members</p>
<div class="content" data-slug="panel2" data-section-content>
<span>Family members list goes here</span>
</div>
</section>
</section>
</div>
</script>
</body>
</html>
My Javascript:
App = Em.Application.create();
App.Router.map(function() {
this.resource('families', function() {
this.route('details');
});
this.resource('charities');
});
Just wanted to know if there are any known issues or caveats between Ember/handlebars and CSS.
Thank you.
EDIT: Got a sample running at http://jsbin.com/iTOsof/3 but does not work after refresh like local host
I am guessing the reason it's not working is because Foundations JavaScript handler is being run when the DOM fires its ready event, at that point Ember haven't rendered its templates so there's nothing to tie the tabs to.
What you could try to do is to add $(document).foundation(); to the DetailsViews didInsertElement.
App.DetailsView = Ember.View.extend({
didInsertElement: function() {
$(document).foundation('section'); // this will only load the section component
}
});
One issue though, since Foundation's JavaScript components are not compatible with Ember you will most likely run into problems when Foundation appends their location hash for the selected section since Ember is using the same method to handle its routing.
You can change Embers location method to a modern variant by specifying:
App.Router.reopen({
location: 'history'
});
This will however not be compatible with IE 9 and below.
Another alternative is to use Bootstrap as an alternative to Foundation (personally I prefer Foundation over Bootstrap but in this case it may be worth it if you don't want to create your own components in Ember), and then use the Ember Components made available for Bootstrap, http://ember-addons.github.io/bootstrap-for-ember/dist/#/show_components/tabs-panes
I am using Ember and my view is getting rendered at the very bottom of my HTML DOM, instead of inside my div element.
Here is my source code :
index.html :
<body>
<div id="test">
<script type="text/x-handlebars">
{{view Skills.RecommendedSkillsListView}}
</script>
</div>
<script type="text/x-handlebars" data-template-name="recommended_skills_list">
<a href="#" {{action "b"}}>DO A NEW THING</a>
</script>
<script src="js/libs/jquery-1.8.3.min.js"></script>
<script src="js/libs/handlebars-1.0.rc.1.js"></script>
<script src="js/libs/ember-1.0.0-pre.2.js"></script>
<script src="js/app.js"></script>
</body>
app.js :
Skills = Ember.Application.create({});
Skills.RecommendedSkillsListView = Ember.View.extend({
templateName: 'recommended_skills_list',
b: function(v) {
alert('new hello');
}
});
Skills.initialize();
The rendered document :
<body class="ember-application">
<div id="test"></div>
<script src="js/libs/jquery-1.8.3.min.js"></script>
<script src="js/libs/handlebars-1.0.rc.1.js"></script>
<script src="js/libs/ember-1.0.0-pre.2.js"></script>
<script src="js/app.js"></script>
<div id="ember135" class="ember-view">
<div id="ember140" class="ember-view">
DO A NEW THING
</div>
</div>
</body>
Note: when using the same code with a previous version of ember (0.9.5) it works as expected
Ah, it looks like it is 'appending your view' to the body which you have given the 'application' template name which Ember will look for. Why not try putting a div inside the body and then referencing this in the Ember.Application.create();?
Ember.Router
Skills = Ember.Application.create({
rootElement: '#test'
});
View
<body>
<div id="test"></div>
<script src="js/libs/jquery-1.8.3.min.js"></script>
<script src="js/libs/handlebars-1.0.rc.1.js"></script>
<script src="js/libs/ember-1.0.0-pre.2.js"></script>
<script src="js/app.js"></script>
<div id="ember135" class="ember-view">
<div id="ember140" class="ember-view">
DO A NEW THING
</div>
</div>
</body>
Let me know if I've missed the point ;)
You need to specify the element to render your application to using the rootElement (docs here, related question: Emberjs rootElement) property of your application:
Skills = Ember.Application.create({
rootElement: "#test"
});
Here is a working example: jsfiddle example
Rendered output from example:
<body>
<div id="test" class="ember-application">
<div id="ember135" class="ember-view">
<div id="ember140" class="ember-view">
DO A NEW THING
</div>
</div>
</div>
</body>