Using EmberJS in Grails project with a layout - javascript

I'm trying to use Ember in my grails project. However, I'm having a layout issue. The ember templates are always displaying below the footer. This does not happen with regular html, when I don't use Ember.
Here is my layout
<html>
<head>
<g:layoutHead/>
<r:require module="application"/>
</head>
<body>
<div id="wrap">
<g:layoutBody/>
<div id="push"></div>
</div>
<div id="footer>
</div>
</r:layoutResources/>
</body>
</html>
This is the page where I'm using ember template
<html>
<head>
<meta name="layout" content="main"/>
</head>
<body>
<script type="text/x-handlebars">
<h1>test</h1>
</script>
</body>
</html>
Here is my applicationresources.groovy
modules = {
application {
dependsOn "jquery", "emberjs","emberjsdata"
resource url:'js/application.js'
resource url:'js/App.js'
}
emberjs {
dependsOn 'jquery,handlebars'
resource url: 'js/ember-latest-stable.js'
}
handlebars {
resource url: 'js/handlebars-1.0.0-rc.4.js'
}
emberjsdata{
dependsOn 'emberjs'
resource url: 'js/ember-data-latest.js'
}
}
Problem
For some reason the hello shows up below the footer. Not sure why since it works fine with plain html

By default ember use the body as root element, then the contents of templates will be inserted and replaced in that element. So by default ember is a single page application.
If you need ember just for some piece of html, use by example:
Javacript
YourAppNamespace.rootElement = "#myEmberApp";
Html
<body>
<div id="wrap">
<!-- render normally contents from server -->
<g:layoutBody/>
</div>
<div id="myEmberApp">
<!-- all content here is controlled by ember -->
</div>
<div id="footer>
My company all rights reserved
</div>
</r:layoutResources/>
</body>
Hope it helps

Related

Dropdown list isn't working after importing another html file using jquery?

I'm trying to import header.html for avoiding file duplication. But in this situation, I can't use PHP.
This is the head section of index.html file,
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
The body section I have called my header.html as follows,
<body>
<!-- include Header -->
<div id="header"></div>
<!-- end include header -->
</body>
The header is including fine but after the header included the dropdown lists become unclickable.
When I go to inspect elements there are following errors,
One possible reason for your problem would be that if you already have <html><head><body> tags in all header.html, footer.html and your master page. When you import those sub pages in your master page all those tags will come along with contents. If its true delete those tags from your sub pages because your master page should only have one of specific tags
1) Remove the following tags from header.html and footer.html
<html>
<head>
</head>
<body>
</body>
</html>
2) Regarding Slick error please make sure you are not calling the init twice, best way would be
$('.selector').slick();
$(document).ready(function() {
$.get("header.html", function(response){
$('#header').html(response);
});
})
<?php include_once('header.html');?>
<div id="header"></div>
<?php include_once('footer.html');?>

Run jQuery Functions After AngularJS Loaded Views and Included Partials

I'm using both AngularJS (v1.6.4) and jQuery (v2.1.4) in my web application. I included static html files using ng-include. So my index.html is like that:
<body>
<div id="wrapper" ng-controller="mainCtrl">
<div ng-include="'partials/header.html'"></div>
<div ng-include="'partials/menu.html'"></div>
<div class="content-page">
<div ng-view></div>
<div ng-include="'partials/footer.html'"></div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="plugins/jquery-datatables-editable/jquery.dataTables.js"></script>
<script src="plugins/datatables/dataTables.bootstrap.js"></script>
<script src="assets/js/main.js"></script>
<script>
$("#datatable-editable").DataTable();
</script>
</body>
As you see above I have 3 include files and 1 view. I used datatable in angular view. And I want to initialize it in my index.html file with $("#datatable-editable").DataTable(); But it doesn't work. When I write html elements directly to the page instead of including, it works fine. Why is this happening? How can I solve it?

Handlebars template not displaying context data

I am trying to build a quiz application using Node express and Handlebars as the templating engine.
I have the following template:
<div id="quiz">
<div class="container">
<div class="row" id="quiz-header-row">
<div>
<div id="question-title"></div>
</div>
</div>
<div class="row" id="quiz-choices-row">
<div id="choices"></div>
</div>
<div class="row" id="quiz-footer-row">
<button id="quiz-next-btn" class="btn btn-success">Next</button>
</div>
</div>
</div>
<!-- Template -->
<script id="choices-template" type="text/x-handlebars-template">
<div>\{{choices}}</div>
<div>
{{#each choices}}
{{this}}
{{/each}}
</div>
</script>
If I do not use the backslash before curly braces, handlebars displays an empty string and thus I cannot write this:
<div>{{choices}}</div>
Found on handlebars official website that I have to use: \{{choices}}.
The javascript that fills the template with data:
renderChoices: function() {
var template = Handlebars.compile($('#choices-template').html());
var context = {
// array of quiz item choices
choices: Quiz.questions[Quiz.currentIndex].choices
};
$('#choices').html(template(context));
},
The issue I am facing is the #each block that does not display anything. The backslash before {{#each choices}} cannot be used as in the example above because the server throws "server internal error: 500".
This is the console logged context:
console log
The fiddle below works as needed and does not need the backslashes
fiddle.
But the exact same code I run in my project using Node does not display anything written inside the #each block.
I have Handlebars both on the server (express-handlebars) and on the client. Considering the results, I am doing something the wrong way.
Thank you in advance.
EDIT: Fixed by precompiling the templates in external files and including them as scripts in the view.
Try something like this:
{{#each choices as |choice|}}
{{choice}}
{{/each}}
And make sure choices is populated as you expect.
i just tried to execute your code it's printing the data, i have used jquery-2.2.1 and handlebars 2.0.0
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<script id="address-template" type="text/x-handlebars-template">
<div>
{{#each choices}}
{{this}}
{{/each}}
</div>
</script>
<!--Your new content will be displayed in here-->
<div class="content-placeholder"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js">
</script>
<script>
$(function () {
// Grab the template script
var theTemplateScript = $("#address-template").html();
// Compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
// Define our data object
var context={
choices: ["choice1","choice2","choice3"]
};
// Pass our data to the template
var theCompiledHtml = theTemplate(context);
// Add the compiled html to the page
$('.content-placeholder').html(theCompiledHtml);
});
</script>
</body>
</html>
Here is a link to plunker, i also tried with handlebars 4.0.3 and jquery 3.1.1 it's running fine.

Framework7: Default url to a different view is not working

As we can see in the views page of documents in Framework7.
Default View URL
If you think that for some reason Framework7 detects wrong default
View URL (which is used for navigation history), or if you want to
have different default View URL, you can specify it using data-url
attribute on View element or using url parameter when you initialze
View:
<div class="view" data-url="index2.html">
If I do as the doc suggests, for example, in the app which accompany the framework7 package, single view app, laying under /dist/index.html, if I do something like:
<div class="view view-main" data-url='about.html'>
But when i open index.html, the main view is not directing to about.html.
Why is this happening?
It does not work like that. I think you want to load the about.html as default in the main view. You can do this something like this:
<html>
<head>
...
</head>
<body>
....
<div class="views">
<div class="view view-main"></div>
</div>
...
<script type="text/javascript" src="js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
...
<script>
mainView.router.loadPage('about.html');
</script>
</body>
</html>

Load controller dynamically without routeProvider

so i have my index.html like following
<html>
<body ng-controller="Ctrl">
<div id="main" ng-include="body"/>
<div id="sidebar" ng-include="side"/>
</body>
</html>
app.js:
var app=angular.module("myapp",[]);
app.controller('Ctrl',['$scope',function($scope) {
$scope.gotoXXX() {
$scope.sidebar="xxx.html";
}
}]);
sidebar.html:
<script src="XXXcontroller.js"></script>
<div ng-controller="XXXcontroller">
</div>
Obviously, this is not working. It prompts for XXXcontroller not defined. So I figured the controller was not properly injected. And I need to change view partially, so routeProvider is not an option.
So I'm wondering, Is there anyway to dyanmically inject controllers?

Categories

Resources