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.
Related
I'm using Bootstrap with an Ember project, and following markup produces navigation tabs that work on the desktop, but fail in Chrome & Safari the iPhone 6.
Here is the markup produced:
<nav>
<ul class="nav nav-tabs">
<li id="ember611" class="ember-view active">
<a>Tab 1</a>
</li>
<li id="ember612" class="ember-view">
<a>Tab 2</a>
</li>
</ul>
</nav>
Tapping on Tab 2 doesn't work. Any suggestions?
Here is the HtmlBars that produces this HTML:
<nav>
<ul class="nav nav-tabs">
{{#link-to "foo.bar.tab1" tagName="li" role="presentation"}}
<a href={{view.href}}>Matches</a>
{{/link-to}}
{{#link-to "foo.bar.tab2" tagName="li" role="presentation"}}
<a href={{view.href}}>Standings</a>
{{/link-to}}
</ul>
</nav>
I'm using Bootstrap 3.3.4, and Ember 1.3
You're using your li elements as links when they really shouldn't be. That will work in some browsers but it's non-standard. I usually do something like this:
{{#link-to 'foo.bar.tab1' tagName='li' href='false'}}
{{link-to 'Matches' 'foo.bar.tab1' role='presentation'}}
{{/link-to}}
This will make the a tag the actual link (which will work across browsers), but will still add the active class to the li elements.
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
}
}
})
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
first,i can watch the data in blogs template.
<script type="text/x-handlebars" id="blogs">
<div>
<div>
{{#linkTo 'blogs' }}bogsCategory{{/linkTo}}
</div>
<ul>
{{#each controller}}
<li>{{title}}</li>
{{/each}}
</ul>
</div>
</script>
then , build a new template "blogs/index" , to render into the blogs, but now, there nothing on my page.
<script type="text/x-handlebars" id="blogs/index">
<ul>
{{#each controller}}
<li>{{title}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" id="blogs">
<div>
<div>
{{#linkTo 'blogs' }}bogsCategory{{/linkTo}}
</div>
{{ outlet }}
</div>
</script>
i don't know where take mistake and how to do
Route:
App.Router.map(function(){
this.resource('blogs', { path: '/'});
});
App.BlogsIndexRoute=Em.Route.extend({
model: function(){
return App.Blog.find();
}
});
enter link description here
<----------------------------------------------------------------------------------------->
i want build a blog pag, the left is blogscategory, right is blog list, when i first into page, use 'blogs/index' to Initialization 'blogs', when click the blogscategory the blogs content will change by the category.
Have a look here at your working jsbin.
Basically I've changed BlogsIndexRoute to BlogsRoute and renamed the blogs template to application. Now it correctly renders the blogs/index template into the application template. I hope this is what you where trying to achieve.
Hope it helps.
EDIT: Updated code and explanation
Here's the application.html.erb:
<div class="container">
<div class="row">
{{outlet}}
</div>
<hr>
<footer>
<p>© 2013</p>
</footer>
</div>
And then here's the countries.hbs file I'm trying to convert to emblem.
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Countries</li>
{{#each model}}
<li>
{{#linkTo "country" this}}{{title}}{{/linkTo}}
</li>
{{/each}}
</ul>
</div>
</div>
<div class='span9'>
{{outlet}}
</div>
Based on the Emblem docs, this was as close as I could get, and I've tried variations, but I couldn't get it to work. What's the syntax?
.span3
.well.sidebar-nav
ul.nav.nav-list
li.nav-header Countries
each model
li = linkTo "country" #{title}
.span9
{{outlet}}
Part of the problem, I know, is that emblem doesn't seem to have {{outlet}}, so I know those last 2 lines won't work.
I'm using the better_errors Rails gem, and here's the error:
Pre compilation failed for: .span3
.well.sidebar-nav
ul.nav.nav-list
li.nav-header Countries
each model
So is there something with the each loop?
This should work for you.
.span3
.well.sidebar-nav
ul.nav.nav-list
li.nav-header Countries
each model
li
linkTo "country"
= title
Cheers
There are a few syntax errors in your code. This should work:
.span3
.well.sidebar-nav
ul.nav.nav-list
li.nav-header Countries
each model
li
= link-to "country" | #{title}
.span9
= outlet