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
Related
I'm new to EmberJs and I'm working on a project that I need to add properties in javascript and css in templantes generated by ember-cli, my difficulty is in finding the javascript and css files
When I search the project for the class or id, it shows me only what is in the dist that can not be changed
Can anyone with emberJS experience help me make these changes?
Template with i w[enter image description here][1]anna to work:
<div class="top-banner">
{{ top-banner pageBanner=model.news.banner }}
{{ search-component exchangeTypes=model.exchangeType}}
</div>
{{bread-crumbs breadcrumbs=breadcrumbs}}
<section class="container destaque noticia">
{{title-content light=model.news.title}}
<div class="row informacoes-news">
<div class="col-xs-12 noticia-texto">
{{{model.news.content}}}
</div>
</div>
</section>
{{share-bar}}
<div class="col-md-1 col-xs-12 download-container">
<a class="teste" href="{{model.news.pdf}}">Download</a>
</div>
{{featured-news type="featured_news" noticias=model.featuredNews news=true}}
{{contact-widget states=model.brazilState}}
{{rodape-sitemap}}
Here is an outline of the basics in an ember-twiddle: https://ember-twiddle.com/f537e51449c1c49ae32794b9d15bc6ff?openFiles=templates.application.hbs%2C
It sounds like you inherited some code - and like you'd benefit from spending a few hours with the Ember guides tutorial: https://guides.emberjs.com/current
Happy travels!
application.hbs
<h1>{{appName}}</h1>
<h2>this is the application.hbs template (base template)</h2>
{{info-list}}
controllers/application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'this is a property value seen in the application template...',
});
app.css
body {
background: lightgreen;
}
templates/components/info-list.hbs
<ul class='item-list'>
<li>...</li>
</ul>
I want to change the DIV class base on CLICK action. I am trying to make a floating sidebar like this http://startbootstrap.com/templates/simple-sidebar.html
This demo has only three lines of code for toggle-ing the class.
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("active");
});
</script>
I want to achive same thing but in ember way. Below is my HTML code:
<div id="wrap">
<div class="pull-left" id="main_menu">
<ul class="list-group">
<li class="list-group-item">{{#link-to "selectImage"}}<h4>Choose Picture</h4>{{/link-to}}</li>
<li class="list-group-item">{{#link-to "message"}}<h4>Write Message</h4>{{/link-to}}</li>
<li class="list-group-item"><h4>Account info</h4></li>
<li class="list-group-item"><h4>Recent Orders</h4></li>
<li class="list-group-item"><h4>How to</h4></li>
<li class="list-group-item"><h4>FAQ</h4></li>
</ul>
</div>
<!-- Begin page content -->
<div class="container" id="page_content">
{{outlet}}
</div>
<!-- End page content -->
</div>
</script>
<script type="text/x-handlebars" id="cards/index">
<h1>
<button class="pull-left btn btn-default" data-target="#main_menu" {{action 'changeClass'}}>
<img src="images/icons/menu_tablet.png" class="main_menu"/>
</button>
</script>
Now I do not know how can I use the action to change the class in WRAP div. I will really appreciate any help regarding this issue.
You can add the action handler within the controller for cards/index
Controller = Ember.ObjectController.extend({
actions: {
changeClass: function() {
// Run logic here
}
}
})
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>
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.
I'm trying to put together an application using Ember.js
Find the jsfiddle here: http://jsfiddle.net/wprk14/ARbMa/
I think I have the routing / pages / templates working but I can't get my navigation to show up. I think I need to add another outlet for navigation but the documentation isn't really helping me understand what I need to do.
Relevant HTML
<div id="wrapper">
<div id="main-content">
<script type="text/x-handlebars">
{{outlet}}
</script>
</div>
</div>
<footer>
{{outlet nav}}
</footer>
<script type="text/x-handlebars" data-template-name="nav">
<ul id="tab-bar">
<li>{{#linkTo "messages.inbound"}}Inbox{{/linkTo}}</li>
<li>{{#linkTo "messages.outbound"}}Sentbox{{/linkTo}}</li>
<li>{{#linkTo "parking"}}Parking{{/linkTo}}</li>
<li>{{#linkTo "fuel"}}Fuel Tracker{{/linkTo}}</li>
</ul>
</script>
Relevant JS
App.Router.map(function() {
this.route("login");
this.resource('messages', function() {
this.route('inbound');
this.route('outbound');
});
this.route("parking");
this.route("fuel", { path: '/fuel-tracker' });
});
You should add {{render nav}} instead of {{outlet nav}} to render the navigation bar on all the pages, regardless of what is inside the current outlet.