routes.js
Router.route('/', function () {
this.render('Home');
});
Router.route('wall', function () {
this.render('Wall');
});
landing.html
<template name="home">
...
</template>
drawingApp.html
<body>
{{> wall}}
</body>
<template name="wall">
...
{{> canvas}}
...
</template>
<template name="canvas">
...
</template>
drawingApp.js
...
Template.wall.events({
...
If I include <body> {{> wall}} </body>, the landing page renders below the app. If I delete <body> {{> wall}} </body>, landing page renders properly, but when button is clicked to enter, it opens a non-functioning app. (Edited since first posted trying many things, but core issue remains the same). Any ideas? Thank you.
You need to remove calling wall template from body tags.
So your wall.html will be:
<head>
<title>LKG Canvas</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
</head>
<body>
</body>
<template name="wall">
<!-- <h1>{{title}}</h1> -->
<div id="settings">
<div>
<button class='eraser' button id="btn btn-link"><span class="glyphicon glyphicon-erase"></span></button>
<button class='clear' button id="btn btn-link"><span class="glyphicon glyphicon-remove"></span></button>
...
</div>
<div id="settings">
<button class='thinnest'>1</button>
...
</div>
<div id="settings">
<button class='shade'>3%</button>
</div>
{{> canvas}}
</template>
<template name="canvas">
<div class="centerize">
<div id="canvas" style="background-color: #333; width: 1250px; height: 550px;"></div>
<br>
<input id="btn-Preview-Image" type="button" value="Preview"/>
<a id="btn-Convert-Html2Image" href="#">Download</a>
<div id="previewImage"></div>
</div>
</template>
How about this approach:
router.js
Router.route ( '/', {
name:'home',
layoutTemplate:'index',
});
Router.route('/wall', {
name:'wall',
layoutTemplate:'index',
});
home.html is as is, no changes:
<template name="home">
<div class="container">
<div class="jumbotron">
<h1>Heading</h1>
<p>Some text here.</p>
</div>
<div>
<div class="centerize">
<a class="btn btn-primary btn-lg" href="wall" role="button">Draw</a></div>
</div>
</div>
</template>
wall.html, removed the <body> stuff
<template name="wall">
<!-- <h1>{{title}}</h1> -->
<div id="settings">
<div>
<button class='eraser' button id="btn btn-link"><span class="glyphicon glyphicon-erase"></span></button>
<button class='clear' button id="btn btn-link"><span class="glyphicon glyphicon-remove"></span></button>
...
</div>
<div id="settings">
<button class='thinnest'>1</button>
...
</div>
<div id="settings">
<button class='shade'>3%</button>
</div>
{{> canvas}}
</template>
<template name="canvas">
<div class="centerize">
<div id="canvas" style="background-color: #333; width: 1250px; height: 550px;"></div>
<br>
<input id="btn-Preview-Image" type="button" value="Preview"/>
<a id="btn-Convert-Html2Image" href="#">Download</a>
<div id="previewImage"></div>
</div>
</template>
index.html
<template name="index">
{{> yield}}
</template>
Index.html basically encompasses the other routes that will render in the yield region.
Related
I am using the standard example for off canvas navigation in foundation like this...
<body>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<!-- Menu -->
<ul class="vertical menu">
<li>Foundation</li>
<li>Dot</li>
<li>ZURB</li>
<li>Com</li>
<li>Slash</li>
<li>Sites</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
</div>
</body>
I am looking for a way to trigger a jquery CSS function after the animation has finished.
I have this so far..
$( document ).on( "close.offcanvas", function( e ){
//$('.pagination').css('display','block');
});
But this triggers when the open button is clicked, does anybody know if the are any callbacks or similar that I can use so that the CSS is applied only after the off canvas animation has finished?
Foundation includes an 'opened' and 'closed' event for this purpose: https://foundation.zurb.com/sites/docs/off-canvas.html#js-events
In the code example below I output a message to the console when the menu is closed.
$(document).foundation()
$('#offCanvas').on('closed.zf.offcanvas', function(event) {
//$('.pagination').css('display','block');
console.log("Off-canvas menu was closed.")
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/js/foundation.min.js"></script>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!-- Menu -->
<ul class="vertical menu">
<li>Foundation</li>
<li>Dot</li>
<li>ZURB</li>
<li>Com</li>
<li>Slash</li>
<li>Sites</li>
</ul>
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
<button type="button" class="button" data-toggle="offCanvas">Open off-canvas</button>
</div>
I have a bootstrap modal on the screen. When the modal is showed, it is positioned on the center of the screen.
<div class="modal fade" id="ua_dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
....
</div>
</div>
I need to move the modal on my screen, because cover some information from my screen. The user should be able to move on the right, on the left...etc. Can I do that? there is some settings that I can use? or with js? what is the best way? Thanks!
I think You Need This :)
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div>
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
<script>
$('.modal').modal({ keyboard: false,
show: true
});
// Jquery draggable
$('.modal-dialog').draggable({
handle: ".modal-header"
});
</script>
.modal-content{
margin-top:50px !important;
}
HTML:
<!-- Button trigger modal -->
<a href="#" data-toggle="modal" data-target="#myModal" class="quickview">
OPEN MODAL
</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">BX Slider</h4>
</div>
<div class="modal-body">
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
</ul>
<div id="bx-pager">
<a data-slide-index="0" href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a>
<a data-slide-index="1" href=""><img src="http://bxslider.com/images/thumbs/houses.jpg" /></a>
<a data-slide-index="2" href=""><img src="http://bxslider.com/images/thumbs/hill_fence.jpg" /></a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS:
function quickView() {
var slider = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
controls: false
});
slider.destroySlider();
//$('#myModal').modal('show');
slider.reloadSlider();
}
$(".quickview").on("click", quickView);
I have a Bootstrap modal which I'm injecting dynamic image galleries into. So fx. I have 10 links on a page, each link is containing unique data-attributes with image URLs. I am then sending these URLs into my click event, so I can use them with BXslider, but it doesn't seem to be working.
I'm reloading the BXslider within my click event, but the "mainimage" is not showing.
However, if I move the code out of the click event, it seems like it's working.
Any suggestions here?
Codepen:
http://codepen.io/marting/pen/dYNabj?editors=101
I changed your code to this, and it works like a charm
JS:
function quickView() {
var slider = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
controls: false
});
setTimeout(function() {
slider.reloadSlider();}, 200);
}
$(".quickview").on("click", quickView);
See it works here: http://codepen.io/anon/pen/JYgxOE?editors=101
I'm working on a form using the Ember-Data Fixture adapter. My save method is in the edit route as follows:
actions: {
save: function () {
var visit = this.get('currentModel'),
self = this,
store = this.store;
visit.setProperties({
'notes': $('#notes textarea').val()
});
console.log('Visit Changes: ' + visit.changedAttributes());
visit.save();
console.log('Visit saved!');
self.transitionTo('planning.visits.visit', visit);
}
The notes field is referenced in the template simply as {{notes}} and is in the model as a DS.attr('string')
visit.changedAttributes() shows that the notes value changed and if I throw a breakpoint on the afterModel hook in the planning.visits.visit route I can get the object and see that the field was updated but the template itself never updates to reflect the change.
What am I missing?
*** EDIT ***
The view template is
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">
<span style="font-weight: normal; color: #666;">Visit </span>{{visitNumber}}
</span>
<span class="pull-right">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown">
Options
<i class="fa fa-caret-down fa-lg"></i>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li>{{#link-to 'planning.visits.edit' this}}<i class="fa fa-pencil-square-o"></i><span style="padding-left: 10px;">Edit Visit</span>{{/link-to}}</li>
<li><i class="fa fa-plus"></i><span style="padding-left: 10px;">Add Tasks</span></li>
<li class="divider"></li>
<li><a {{action 'delete'}}><i class="fa fa-trash-o"></i><span style="padding-left: 10px;">Delete Visit</span></a></li>
</ul>
</div>
</span>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<p>
<label>Date:</label><br />
<strong class="value">{{startDate}}</strong> to <strong class="value">{{endDate}}</strong>
</p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<p>
<label>Notes:</label><br />
<strong class="value">{{notes}}</strong>
</p>
</div>
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-lg-12">
<ul id="detail-tabs" class="nav nav-tabs">
{{#link-to 'planning.visits.visit.tasks' this tagName="li"}}{{#link-to 'planning.visits.visit.tasks' this}}Tasks{{/link-to}}{{/link-to}}
{{#link-to 'planning.visits.visit.requirements' this tagName="li"}}{{#link-to 'planning.visits.visit.requirements' this}}Requirements{{/link-to}}{{/link-to}}
{{#if hasIssue}}
{{#link-to 'planning.visits.visit.issues' this tagName="li"}}{{#link-to 'planning.visits.visit.issues' this}}Problems<span style="margin-left: 10px;>" class="badge pull-right alert-danger">1</span{{/ link-to}}{{/link-to}}
{{/if}}
</ul>
</div>
</div>
<div class="row">
<div id="tab-content" class="col-lg-12">
{{outlet tabs}}
</div>
</div>
</div>
</div>
And the edit template is
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">
<span style="font-weight: normal; color: #666;">Edit Visit </span>{{visitNumber}}
</span>
<span class="pull-right">
<button class="btn btn-default" {{action 'save'}}>
<i class="fa fa-check green" style="margin-right: 5px;"></i>Save Changes
</button>
{{#link-to 'planning.visits.visit' this tagName="button" classNames="btn btn-default"}}
<i class="fa fa-ban red" style="margin-right: 5px;"></i>Discard Changes
{{/link-to}}
</span>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-4">
<p>
{{date-picker-with-label label="Start Date" value=startDate id="startDate"}}
</p>
</div>
<div class="col-lg-4">
<p>
{{date-picker-with-label label="End Date" value=endDate id="endDate"}}
</p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<p>
<label>Notes:</label>
{{textarea property=notes rows=3 id="notes"}}
</p>
</div>
</div>
</div>
</div>
Problem solved. PEBKAC error on my end. Helps if both the template field and the field you are updating are the same.
Today , I just start learning ember.js. I tried one sample application.
Search the result and it will show the list. Click on the link and it will show the result at right sidebar. It's working fine.
However, I want to show home template at first.
When I tried with {{outlet name}} , it can show the home template however it is not working when I click on link. So, is there any way to show default outlet ?
I found about default outlet at here . However, it need to remove my data-templte-name to show default outlet. I don't want to remove the data-template-name.
Current template is like following.
<script type="text/x-handlebars" data-template-name="dictionary">
<div id="left">
<header>
<div id="topheader">
<img src="images/logo.jpg" class="logo">
<i id="search-icon"> </i>
{{input type="text" id="query" placeholder="Search" value=query
action="query"}}
</div>
</header>
<div id="results">
{{#each results}}
{{#link-to "detail" this}}
<section>
<div class='detail'>
<div class='word'>{{Word}}</div>
<div class='state'>{{state}}</div>
<div class='def'>{{def}}</div>
</div>
</section>
{{/link-to}}
{{/each}}
</div>
<footer>
<div id="bottom">
<a href="#" class='btn'>Login</a>
<a href="#" class='btn add'>Add</a>
</div>
</footer>
</div>
<div id="right">
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" id="detail">
<div id="details">
<div class='word'>{{Word}}</div>
<div class='state'>{{state}}</div>
<div class='def'>{{def}}</div>
</div>
<div id="discuss">
</div>
</script>
<script type="text/x-handlebars" id="home">
<div id="homeScreen">
Sample home screen
</div>
</script>
The root template to be rendered is the application template (associated with the root/application level). An empty id/data-template-name is assumed to be the application template. If you want to use a different template for the application root you can create the application view and specify the templateName.
App.ApplicationView = Ember.View.extend({
templateName: 'foo'
});
http://emberjs.jsbin.com/EZocURAR/1/edit