Can I use handlebars to create template or module structure like this
<div id="container">
<div id="left">
//include module A src
</div>
<div id="right">
//include module B src
</div>
</div>
If it cannot, what is a good template engine that can couple with nodejs do achieve the above? I come from java web framework, and this can be achieve very easy but it is not so apparent here.
Check partial section of handlebarsjs docs.
So first you register the partials:
Handlebars.registerPartial('moduleA', fs.readFileSync('moduleA.html'));
Handlebars.registerPartial('moduleB', fs.readFileSync('moduleB.html'));
Then in the html you do this:
<div id="container">
<div id="left">
{{> moduleA}}
</div>
<div id="right">
{{> moduleB}}
</div>
</div>
Related
After upgrading to SAP Commerce 2105 Patch 13 from 1811, components with type CMSParagraphComponent do not have img, span HTML tags and HTML tag attributes like class, style.
Before upgrade HTML was displaying in the page as following:
<div class="content">
<div class="size-guide__area active" data-js="size-guide-area">
<div>
<div class="size-guide__close" data-js="size-guide-close">
My text
<span class="icon-close-circle"></span>
</div>
</div>
</div>
</div>
My component is covered with <true class="yCmsComponent"></true> after upgrade somehow.
After upgrade HTML is displaying as following:
<true class="yCmsComponent">
<div class="content">
<div>
<div>
<div>
My Text
</div>
</div>
</div>
</div>
</true>
impex:
INSERT_UPDATE CMSParagraphComponent;$contentCV[unique=true];uid[unique=true];name;&componentRef;content[lang=$lang];
;;chartParagraph;Chart Paragraph;chartParagraph;"<div class='size-guide__area' data-js='size-guide-area'>
<div>
<div class='size-guide__close' data-js='size-guide-close'>
My text
<span class='icon-close-circle'></span>
</div>
usage in tag file:
<cms:component uid="chartParagraph" evaluateRestriction="false"/>
CMSParagraphComponentRenderer class is sanitizing HTML. Rules are defined in HtmlSanitizerPolicyProvider class. It is checking a property before sanitizing. I solved issue by changing the property in storefront extension. You may customize HtmlSanitizerPolicyProvider class to have a safer solution. Changing following property may cause an issue, it is not the safest solution.
In the project.properties file of the storefront extension, add following property.
cms.components.allowUnsafeJavaScript=true
i built up a nodejs app using express and ejs as template engine. i can show a list of articles in a page but i don't know how to show detail of article when i click on the item. using Angular 4 you can use components and inject componets on the same page showing details in one compement when you click the item in the other one. i was wondering if it is possible to achieve same goal with ejs
<div class="container">
<div class="row">
<div class="col-lg-4">
<% items.forEach(item){%>
<ul>
<li><%=item%></li>
</ul>
<% } %>
</div>
<div class="col-lg-8>[here details of article]</div>
</div>
</div>
I am a beginner, trying to teach myself code. I know HTML and have recently learnt the basics of Javascript syntax and bootstrap - I realise the best way to learn is to build something. So I am trying to build a website where users can search for famous people to see what books they recommend. For example, if I want to know what books Elon Musk would recommend, I should be able to type in his name and it would take me to a page where there is a list of all books recommended by him.
I have the index page ready looking something like google, and I am trying to understand how I can have the search bar functioning so people can search through all the pages I would build. I realise I need the auto complete feature to work so people can type in the first few letters of the person's name and click on the suggestion to go to the page.
Here's my code so far:
#content {height: 100%;}
html, body {height: 100%;}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap JS from CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Bootstrap CSS from CDN -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="css/styles.css" rel="stylesheet">
<title>Page Title</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img class="center-block" src="images/logo.png" width="270" height="95" alt="Google" id="logo"></div>
<div class="span4"></div>
</div>
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<input type="text" class="form-control" name="x" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container">
<ul class="nav navbar-nav navbar-left">
<li>Submit</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Privacy</li>
<li>Donate</li>
</ul>
</div>
</div>
</div>
</body>
</html>
as you said, best way to learn is building something on your own from scratch. To create the functionality you described you need:
server for responding to the requests made by browser. I suggest starting with Node js especially with express (https://expressjs.com/). It's really simple to install and get started.
database (or just static json file) with node you can use for example Mongo db with Mongoose (http://mongoosejs.com/)
front-end framework and libraries you are using bootstrap which is fine! Add React js (https://facebook.github.io/react/) to that and you are ready to go!
So my suggestion is to use those libraries/frameworks and learn just bit by bit. Start from server and try creating some basic pages (or just page). You can fetch the autocomplete data then with AJAX techinque. React has lot of well written components and for example for ajax autocomplete you can use this: https://jedwatson.github.io/react-select/
Happy learning!
I'm new to JS and I'm trying to find a solution to creating a responsive custom grid layout on the Zurb Foundation 4 framework.
Custom Layout
There will be a set size for bigger blocks and the smaller ones will fill in around it but in this type of pattern as more divs are added.
But in a mobile layout, they will all become the same size and stack.
I've been messing around with mason.js and jQuery masonry but I haven't had any luck. Would either of these work for my problem or is there something else I should look into?
You can do a layout like that with just nested rows and using other grid classes like "small-", "large-", push, pull etc
I know you mentioned a JavaScript solution, but I thought I would offer up a crude Html/CSS option.
<div class="row">
<div class="large-2 columns">
<div class="row">
<div class="large-12 columns"></div>
</div>
<div class="row">
<div class="large-12 columns"></div>
</div>
</div>
<div class="large-5 columns"></div>
<div class="large-5 columns"></div>
</div>
<div class="row">
<div class="large-4 columns"></div>
<div class="large-8 columns">
<div class="row">
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
</div>
<div class="row">
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
</div>
</div>
</div>
Here is an extremely rough jsFiddle example
Obviously some playing around with the column count and possibly customize margins would be in-order. I did remove the media queries since the result window was playing tricks on me.
Hope this helps either way.
I wrote a plugin that does just this. check out www.masonjs.com that should do exactly what you're looking for! Cheers!
I have a web app were the entire layout remains constant except for one <div>. Currently, I'm just using routes to handle links and it seems like quite a waste to reload the rest of the layout.ejs file where the only thing I wish to change is my <div>.
What would I have to change in my layout.ejs file? Here is my current file:
<!DOCTYPE html>
<html lan="en">
<head>
<title><%= title %></title>
<link rel="stylesheet" href="/stylesheets/reset.css">
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="/nowjs/now.js"></script>
<script src="/javascripts/chat.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="chat">
<input type="text" id="text-input">
<input type="button" value="Send" id="send-button">
</div>
<div id="content">
<%- body %>
</div>
<div id="rooms">
</div>
<div id="footer">
<div id="footer_links">
Home | About | Contact
</div>
</div>
</div>
</body>
</html>
I was thinking about using AJAX to use this, but I've heard some good things about using partial views. I'm just not sure at all about how to set this up. Also, I've heard that it's possible to use WebSockets with partial views instead of AJAX. Is this a good idea, or even possible?
Sorry this may be straightforward. I'm having a difficult time with the documentation.
Thanks!
I just worked it out.
You can call `partial(filename)` in the view to load the partial. say we use EJS, and there is three files in `views/`:
1. layout.ejs
2. index.ejs
3. header.ejs
and the content of index.ejs is :
then, start the server, browser it, you will see `header.ejs` is loaded to `index.ejs`.
!!!　UPDATE
In the express version >=3.0, there is no partial() any more. But we can use <% include xxx.file %>, or just use another module: "express-partials". Please search it on Github.