Is there a way to access YFM properties defined in a child layout in its parent layout?
For example, given a child layout page.hbs:
---
layout: wrapper.hbs
no_header: true
----
<div class="wrapper">{{> body }}</div>
I'd like to access the no_header YFM property defined in page.hbs in the parent layout wrapper.hbs:
<html>
<body>
{{#unless layout.no_header}}<header></header>{{/if}}
{{> body }}
</body>
</html>
The front matter merges up so you should be able to get it on the root of the context.
Try doing {{#unless no_header}}.
Edit: updated based on comment below.
Related
I want to figure out a way to insert HTML inside a <sly data-sly-resource> tag and be able to go inside the component I am retrieving from the resource attribute.
To compare, it would be something like Vue's slots, and React's { this.props.children }.
Example:
Parent Component
<sly data-sly-resource="${'example' # resourceType='path/to/component/structure/example'}">
<h1>Hello World</h1>
</sly>
Example Component
<div id="example-component">
${ variable.getChildrenHTMLCall() } // Does something like this exist?
</div>
Output
<div id="example-component">
<h1>Hello World</h1>
</div>
This functionality does not exist.
You could make a similar functionality by using data-sly-template. But you’d have to pass the HTML sting as a parameter (more specifically option) but that might not be desired or maintainable.
You could use the com.day.cq.contentsync.handler.util.RequestResponseFactory as seen here: http://www.nateyolles.com/blog/2015/10/get-rendered-html-for-an-aem-resource-or-component
I want to use x3dom together with my PolymerElements, but if I put the needed x3d tag inside my Polymer.Element, X3Dom states, that no containers are found, because it uses document.getElementsByTagName('X3D');
see here: https://github.com/x3dom/x3dom/blob/652f3d4acd5e9e9f62b3ecdd92dec5e5c8a2fd86/src/Main.js#L25
Is there a way to make dom elements 'public' so that they can be found by libraries like x3dom?
P.S.: A working solution I found is by 'slotting' the element through to the actual destination.
Example:
<body>
<my-custom-element>
<x3d ...> ... </x3d>
</my-customelement>
<script src="x3dom-full.js">
</body>
Works, if I design my Element like this:
<dom-module id="my-custom-element">
<template>
<style></style>
<slot></slot>
</template>
</dom-module>
In case I design my element like this:
<dom-module id="my-custom-element">
<template>
<style></style>
<x3d></x3d>
</template>
</dom-module>
x3dom cannot find it, even if the script tag for x3dom-full.js lies inside the template tag.
The reason I do not prefer the slot tags is that I want to hide the x3dom functionality inside my custom element.
I have plain use class which contains one method that returns complex bean with a lot of setters/getters. Lets name it SomeUse. Given sightly file:
<sly data-sly-use.someUse="com.mycompany.SomeUse">
${someUse.data.firstProperty}
<div>
${someUse.data.secondProperty}
</div>
<!-- ...and so on -->
</sly>
So the point is I don't want to look at someUse.data getting. Instead of it I would do something like this:
<sly data-sly-use.someUse="com.mycompany.SomeUse" data-sly-use.data=${someUse.data}>
${data.firstProperty}
<div>
${data.secondProperty}
</div>
<!-- ...and so on -->
</sly>
I can't do this way though. Is there any alternative to achieve such result? Thanks a lot!
So the answer is to:
<sly data-sly-test.varName="${data.firstProperty}"></sly>
<div> ${varName.secondProperty} </div>
Creating a variable through empty data-sly-test attribute make it accessible after a tag.
You can set variables for use in a WCMUse class with the following syntax:
<sly data-sly-use.someUse="${ 'com.mycompany.SomeUse' # page=currentPage }">
and retrieve the page variable from your WCMUse class's activate() method like this:
Page page = get("page", Page.class);
For a working example, check out this Sightly script and this WCMUse class.
Instead of data-sly-use.data=${someUse.data}
use data-sly-test.data="${someUse.data}".
Then you will be able to get the property like
${data.firstProperty}
<div>
${data.secondProperty}
</div>
You can also set in DOM elements
<div id="elementId" data-sly-test.vehicle="${model.vehicle}">
<p>${vehicle.name}</p>
<p>${vehicle.type}</p>
</div>
I have a polymer element <my-element> with a computed property myProperty. I need to bind myProperty to another place in the HTML page, so I can't put it inside a dom-bind template
Here's what I mean
<html>
<body>
<div>
<my-element my-property="{{myProperty}}"></my-element>
</div>
<!--somewhere deep inside another part of the document-->
<div>
<h4>myProperty = </h4><span>[[myProperty]]</span>
<div>
</body>
</html>
I cannot wrap my-element and the usage of [[myProperty]] in a dom-bind template as this would result in nearly the entire document being enclosed in this. Attempting to use the bind as it is results in myProperty = [[myProperty]] being displayed, not the value of [[myProperty]].
Is there some way to have behaviour similar to data binding but usable across the whole HTML document? (In the future there might also be a case where [[myProperty]] is used inside an attribute such as <my-second-element my-property="[[myProperty]]">). Or if both occurences are wrapped individually in dom-bind templates is there some way to make the bind global?
Thanks in advance
Not sure why you wouldn't be able to do like this:
<head>
...
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
...
</head>
<html>
<body>
<template is="dom-bind" id="app">
<div>
<my-element my-property="{{myProperty}}"></my-element>
</div>
<!--somewhere deep inside another part of the document-->
<div>
<h4>myProperty = </h4><span>[[myProperty]]</span>
<div>
</template>
</body>
</html>
This is totally doable. If myProperty changes inside my-element it would also change in "this" html-document. There also wouldn't be a problem adding your second element:
<my-second-element my-property="[[myProperty]]">
Unless you're missing to tell us some specific behavior that you want, this should be what you want. :)
I am new to Zend Framework and I have a question about something I am trying to do.
The main content of most pages of the application that I am working on will consist of 1 or more div elements that need to be styled the same.
Here is an example of the HTML that I want to generate:
<div id='admin-locations' class='panel'>
<header class="panel-header">
<h2>Locations</h2>
</header>
<div class='panel-content'>
<div id='locations-table' class='google-vis-table'></div>
<form id='locations'>
...
</form>
</div>
</div>
I know I can easily do this by pushing the form to my view script in my controller then adding this code to my controller.
<div id='admin-locations' class='panel'>
<header class="panel-header">
<h2>Locations</h2>
</header>
<div class='panel-content'>
<div id='locations-table' class="google_vis_table"></div>
<?php
echo $this->formLocations;
?>
</div>
</div>
But that is not DRY.
The example I used here has a Google Visualization Table and a Zend Form in it's content. Sometimes the panels will need to contain a form. Sometimes they won't, so I don't think form decorators are the way to go. So basically, the id of the panel, the panel header text and the content of div class='panel-content' need to be dynamic. Everything else will stay the same from panel to panel.
What is my best option here?
You might want to consider using partials:
http://framework.zend.com/manual/en/zend.view.helpers.html#zend.view.helpers.initial.partial
For example, you could have an admin-locations.phtml partial that contains:
<div id='admin-locations' class='panel'>
<header class="panel-header">
<h2>Locations</h2>
</header>
<div class='panel-content'>
<div id='locations-table' class="google_vis_table"></div>
<?php echo $this->form; ?>
</div>
</div>
Now you can simply repeatedly call the partial within a view, with or without supplying a form:
...
echo $this->partial('admin-locations.phtml');
echo $this->partial('admin-locations.phtml', array('form' => $this->yourForm);
echo $this->partial('admin-locations.phtml');
...
Hope this helps.