I am working with a node-backbone application. I create dynamic content and add jquery UI draggable to the content or elements I create. However, when my template system renders, my elements will not even move. The paths are correct. I use a class to make a reference to those elements and the draggable method.
Can someone tell me what is the correct way to include the jquery ui and jquery scripts so they load correctly?
layout jade - index.jade - template (extend layout) rendered in the index.jade
In my app I have a jquery module which is connected to backbone, but for some reason the jquery UI does not connect with it and consequently I have to add a jquery script next it. But then the jquery will not work when I create the dynamic elements with backbone into my templates. I use .html() to add them to template.
This is layout.jade
!!! 5
html(lang="en")
head
title project
meta(name='viewport', content='width=device-width, initial-scale=1.0')
link(rel='stylesheet',href='/styles/bootstrap.css')
link(rel='stylesheet',href='/styles/styles.css')
body
.navbar.navbar-inverse
.container
button.navbar-toggle(type='button', data-toggle='collapse', data-target='.nav-collapse')
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href='#')
img(src='/img/greatlogowhite.png', width='300')
.nav-collapse.collapse
ul.nav.navbar-nav
li.active
a(href='#')
img(src='/img/house.svg', width='70')
li
a(href='#about')
img(src='/img/pen.svg', width='70')
li
a(href='#contact')
img(src='/img/search.svg', width='70')
li
a(href='#contact')
img(src='/img/chat.svg', width='70')
This is index.jade
block content
block scripts
extends layout
block content
div#content
block scripts
script(data-main='js/boot', type='text/javascript',src='/js/libs/require.js')
script(type='text/javascript', src='http://code.jquery.com/ui/1.10.3/jquery-ui.js')
This is how I try to use jquery ui
<script>
$(document).ready(function() {
$( ".pic" ).draggable();
});
</script>
Actually, I made it to solve the problem. Whoever uses backbone, node.js, and require.js, remember to include jquery and jquery UI as libraries with require, and when creating dynamic elements with backbone such as:
$('#content').append(html); inside backbone call jquery UI
$('.drag').draggable();
Related
I have three Pug files in a Node.js/Express application which follows the following layout:
//layout.pug
html
head
title= title
link(rel="stylesheet", href="link")
script(src="links")
// many css and javascript imports
body
header
// header section
block content
footer
// footer section
// more script imports
//index.pug
extends layout
block content
//some content
include slider
//slide.pug
div(class="xxx")
//slider contents
The include keyword actually works here and it renders the slider.pug but the problem I'm facing is that it does not render the slider.pug page as expected. The slider page is rendered in a way that it does not load required styles and javascript files so the result is a messed up html inside a nicely rendered one (index.pug in this case is the nicely rendered one).
I've tried adding the extend layout line to the slider.pug but it also failed.
What is the appropriate way to include a pug file that is meant to rely on the resources included in the layout page such as css and javascript inside another pug file?
I am trying to understand how JADE works when there are several templates.
I worked by this tutorial:
http://www.franz-enzenhofer.com/jade
But, I got this:
$ curl http://localhost:3000
<h1> Franz Enzenhofer</h1>
It seems that the command "res.render('index.jade',..." only took the index.jade template, but didn't insert it into the layout.jade template as should happen...
I assume you are using partials. They were removed with express v3. See the View System Changes part for more information.
From express v3 on you should use blocks. For example:
my-template.jade:
extends my-layout
block head
script(src="myfile.js")
block content
h1 My page
my-layout.jade
doctype 5
html
head
title My title
block head
body
#content
block content
I am attempting to utilize the JShare module for Node/Express.
The example given on Github says:
Next, you need to make a call out to the JShare helper method in your layout file:
!!!
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
!{includeJShare()}
body!= body
So, this example is in Jade. I am using EJS, and for the life of me, I can't figure out how to implement the helper method... This seems so simple, but I'm not sure what !{} does in Jade, or how to replicate it in EJS.
!{var} is unescaped interpolation in jade. You should be able to get the same thing in ejs by doing:
<%- includeJShare() %>
This should write in a <script> tag.
Edit
If ejs tries to parse include, submit a patch request to https://github.com/brooklynDev/JShare/issues (or to ejs) and in the meantime go into node_modules/JShare/jshare.js and change res.locals.includeJShare to just res.locals.JShare and then use JShare() in your ejs.
I'm trying to learn the jade template system and backbone.js in the context of a (relatively simple) node.js webapp. I'm using express.js as my framework. Anyway, backbone.js looks really interesting and powerful, but I don't want to render my clients on the client side.
I'd rather render server-side with node and jade, send the client the rendered page, and just modify live content using backbone. What's the best way to go about this? In other words, what's the best way to use backbone with a page that's already rendered and structured? I realize that I'm not leveraging backbone to it's full power, but I'm pretty much just trying to use backbone rather than a bunch of jQuery selectors and event handlers.
Your backbone view can reference an existing DOM element by passing a reference to the element as el when instantiating the view.
var myViewInstance = new MyViewClass({el: $('#existingDOMElement')});
Any event handlers you have declared in your view class will be bound to any child elements matching the event selectors. Ex:
<html>
<body>
<div id='myView'>
<a class='foo'>Foo</a>
</div>
<script>
var MyViewClass = Backbone.View.extend({
events: {
'click .foo': 'fooClicked'
},
fooClicked: function(e) {
e.preventDefault();
console.log('.foo clicked');
}
});
new MyViewClass({el: $('#myView')});
</script>
</body>
</html>
I'm using layout.jade as a template for all the partials. layout.jade includes a header, footer, sidebar etc, and the partials is what is shown in the body.
Now I've implemented a lightbox with iframe, to show one of the partials in. The problem is that I don't want the header, footer etc to be shown inside the lightbox, just the partial jade file.
Is there a way to exclude layout.jade in this case?
Thanks in advance!
Yes, here's how:
res.render('template', { layout: false /* ... other parameters */ });
See Express docs on view rendering. You can also specify a different layout.