when I'm working with an ember app, I would appreciate to see what component html I'm looking at. I know there is an Ember extension into the browser that can show me component names, but it would be much better to see it in the html. Something like this
<div id="ember282" class="ember-view">
<!-- components/my-component -->
<div id="ember317" class="ember-view">Component content</div>
<!-- components/my-component end -->
</div>
is it possible? and how?
Thank you
Related
Doesnt seem to work. Is there a fix? It seems readmore is expecting sections and artcles; however, foundation uses divs i.e. row and columns. How to fix?
You can use any HTML5 tag with Foundation's grid. The default grid uses Flexbox, no floats and the styles are class based, not tag based.
Example:
<article class="grid-x grid-margin-x">
<div class="section medium-4 cell">
<!-- your content -->
</div>
</article>
EDIT:
My objective:
Create a news page template with header and footer and body.
The news page needs a form for a content editor to add content to with two fields: Headline and story.
Each news page requires its own SEO meta data (keywords / description title).
These stories need to be easy to find within the CMS for future editing etc etc.
What is the best way of going about this?
What I currently have is a "Page" content-type which has all the form fields I require.
To create a new news item, I currently do:
Go to Site Browser
Right-Click [myFolder]
Click "New" --> Page
Choose my page from the select box (that was the page content-type I created earlier)
I now see my form, fill it in and save/publish and I see it, but with the issues I expressed before.
I am pretty sure I am going about this in the wrong way, but what is the right way?
-------------
I am struggling to create a very basic page in dotCMS.
Here is what I want to do:
Create a form for a content editor to be able to add content to the page (Content-Type: Page called "myForm") DONE
The form contains all the default fields (seo stuff etc that comes with the Page content-type) + two extra text fields I have created (fieldA and fieldB) DONE
Create a container and add in the velocity variable names. DONE
Surround the velocity variable names in some HTML. <div>$fieldA</div> and <div>$fieldB</div> DONE
Create a new theme with a template.vtl file DONE
So that is all set up. I now go and create a new page in a folder via Site Browser choosing my new "Page" called "myForm" from the drop down menu. I see my form and enter my data, save and publish.
Result. I dont see any of my data. Just a blank page.
So I check the docs and see what I have missed.
There is a page explaining that I need to add in some velocity into my template.vtl that looks like this:
#if($dotPageContent && $dotPageContent.fieldA)
<div class="row">
#dotedit($!dotPageContent.inode,$!dotPageContent.fieldA)
</div>
#end
#if($dotPageContent && $dotPageContent.fieldB)
<div class="row">
#dotedit($!dotPageContent.inode,$!dotPageContent.fieldB)
</div>
#end
(link to dotCMS help page)
OK, so now when I check my page again, the data is indeed being displayed. But there is a problem. The HTML that is in my container does not get parsed.
E.g. <div>$fieldA</div> and <div>$fieldB</div> does not have the <div></div> tags.
So now I'm worried this is not the way to create pages.
The reason I chose the "Page" content-type was that it comes ready to go with the "Advanced Propertied" for the page like SEO meta data (which by the way all worked fine).
Can someone point out what I may have missed or perhaps a better way of going about this?
Thanks in advance.
If you could post your container and template code somewhere and include the links here I could help you resolve the issue for sure, but I think what might be happening is that you are confusing the Page Content Type with the Container defined Content Types.
Here is a quick explanation that might help conceptual differentiation:
http://screencast.com/t/PlEXKU9glGd
What I explain in the video is that the Page Content Types are for page properties only - not content addition. Like you want a different facebook link on many of your pages, or some other special property tied to each page. To place content in a container, you use a secondary "Content" Content Type, and you add that content type to a container's code field. When a page loads, the execution happens in this order, the Page content loads, page properties and metadata are set, the page calls a template that provides the layout, the template calls containers, the containers have the code that formats the content, and then the content executes in the order that it is placed in the container by the content publisher. The Page content type is not intended to really provide any information that the front end user actually sees other than the Page Title, page url, and properties and metadata that are set "silently" in the background html of the page.
You also might find it helpful to join the dotCMS communty forum: http://dotcms.com/forum/
Hope that helps
In addition to my other post, I did do the test with what you were trying to to, in a test advanced template, and the template.vtl file does display the Page Content, as long as you actually edit your page properties and set, in this case, field A:
<!DOCTYPE html>
<html lang="en">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
#set($dotTheme = $contents.getEmptyMap())
#set($blah1 = $dotTheme.put("path", "/application/themes/one-pager/"))
#set($dotThemeLayout = $contents.getEmptyMap())
#set($blah2 = $dotThemeLayout.put("title", "Bear Mountain"))
<head>
#if($dotPageContent && $dotPageContent.fieldA)
<div class="row">
#dotedit($!dotPageContent.inode,$!dotPageContent.fieldA)
</div>
#end
##dotParse("${dotTheme.path}html_head.vtl")
</head>
#set($utilClass = $pageTitle.toLowerCase().replace(' ', '-'))
<body data-spy="scroll" data-target=".top-nav" data-offset="100">
<div class="body-wrapper">
#dotParse("${dotTheme.path}header.vtl")
<div class="content-wrapper" id="hotel">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>The Lodge</h2>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="wow fadeInLeft" data-wow-delay=".8s">
## Container: Default 2 (Page Content)
## This is autogenerated code that cannot be changed
#parseContainer('5eb11b21-6b13-4fb8-a823-1de20bba56c0')
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="wow fadeInRight" data-wow-delay="1.2s">
## Container: Default 3 (Page Content)
## This is autogenerated code that cannot be changed
#parseContainer('f1ba7688-453c-4c0d-a214-e5ac802b8034')
</div>
</div>
</div>
</div>
</div>
<div class="image-wrapper bg-image-1 hidden-xs" data-stellar-background-ratio="0.5"></div>
<div class="content-wrapper">
<div class="container">
<div class="row">
<div class="col-sm-12">
## Container: Default 1 (Page Content)
## This is autogenerated code that cannot be changed
#parseContainer('56bd55ea-b04b-480d-9e37-5d6f9217dcc3')
</div>
</div>
</div>
</div>
<div class="image-wrapper bg-image-2 hidden-xs" data-stellar-background-ratio="0.7"></div>
<div class="content-wrapper">
<div class="container">
<div class="row">
<div class="col-sm-12">
## Container: Default 4 (Page Content)
## This is autogenerated code that cannot be changed
#parseContainer('a6e9652b-8183-4c09-b775-26196b09a300')
</div>
</div>
</div>
</div>
</div>
#dotParse("${dotTheme.path}footer.vtl")
Powered by Dotcms - The Leading Open Source Java Content Management System
</body>
</html>
This was tested on demo.dotcms.com: U:admin#dotcms.com / P: admin
Ember automatically puts whatever you have in application.hbs inside a <div class='ember-view'>.
For example, if your application.hbs is:
<div class='wrapper'>
...
</div>
The resulting DOM in the browser will be:
<html>
<body>
<div id='ember345' class='ember-view'>
<div class='wrapper'>
...
</div>
</div>
</body>
</html>
That gives me a problem because the 3rd CSS I'm using depends on certain structure. To make it work, it has to be like this:
<html>
<body>
<div class='wrapper'>
...
</div>
</body>
</html>
So I need to tell ember **not** to wrap the content of application.hbs inside that <div id='ember345' class='ember-view'>. How to do that?
Before 1.13 you can make a view (following the naming convention), explained here: How do I customize the view element for the application.hbs template?
But now I'm using 1.13..., and there's no longer the notion of "View"..., and I don't want to use ember-legacy-view add-on (sounds like a step back to me).
Does anybody have a solution?
Thanks,
Raka
Oh... just figured out, you can still create a corresponding view in ember 1.13 (without having to use legacy-view).
I simply did (in ember-cli)
ember g view application
And edit the generated views/application.js to be like this (specify empty string as tagName):
import Ember from 'ember';
export default Ember.View.extend({
tagName: ''
});
So I have a page which looks like the following
[ Nav Bar ]
| |
| Content |
| |
The nav bar I want to be constant across all pages. So the approach I used was to set my page up as follows:
[ Nav Bar ]
{{outlet}}
This is great, I can now render different pages into my outlet for different routes.
But what if I want a default template to be rendered into the outlet for my home page?
I've managed to achieve this by redirecting / to /home, but there must be a better way to do this which allows me to render a default home page at / without re-routing?
Any advice appreciated,
Thanks,
Daniel
To render stuff in the {{outlet}} at the root page /, you have to define a handlerbar script for index:
Your navbar code probably look like this:
<script type="text/x-handlebars">
<div class="navbar ...">
...
</div>
{{outlet}}
</script>
The root page that will be place inside {{outlet}} is the fallowing:
<script type="text/x-handlebars" id="index">
<div class="container">
<h1>Root page!!</h1>
</div>
</script>
In other words, you have to create a handlebar script that will have an id="index".
Should work. It doesn't need any js code to work.
I must admit this property is not well documented and buried in the docs for Ember.View but you could try setting the defaultTemplate property on your ApplicationView. See here for more info on that (search in the page for 'defaultTemplate').
Hope it helps.
The following statement in docs helped me to solve exactly the same problem I was having which is stated in the question:
Ember routing docs
The index template will be rendered into the {{outlet}} in the application template. If the user navigates to /favorites, Ember will replace the index template with the favorites template.
As I am using pod structure in my project, I created an index route having my default template and I placed nav-bar component in my application/template.hbs file.
app/application/template.hbs:
<div id="pageWrapper">
<div id="navbarfixed">{{nav-bar options=options}}</div>
<div id="pageContent">
{{outlet}}
</div>
</div>
app/index/template.hbs
<div id="homeWrapper"> <!--This gets rendered by default in outlet above-->
Some default content of outlet
</div>
I am trying to use foundation UI with ember.js and I seem to have an issue with getting section to work properly. Anything within div class="content" doesn't appear. I am guessing this because of a href ='#' Section 1 . Where else could I be wrong? I don't have a clear understanding of how ember works as I am trying to figure things out.
<div class="section-container accordion" data-section>
<section class="section">
<p class="title">Section 1</p>
<div class="content">
<ul class="side-nav">
<li>Item !</li>
</ul>
</div>
</section>
</div>
Your issue is due to the fact that by default, any element with content class inside a section is hidden. It will remain hidden unless you initialize foundation. The key to solving your issue is doing this:
$(document).foundation();
Now make sure you referenced Foundation's script: foundation.min.js