I am working on a set of Polymer elements (buttons in this particular case) some of which should re-use the same HTML snippet. A structure for a custom button is as follows:
...
<link rel="import" href="button-base.html" id="content">
<link rel="import" href="styles.html">
<link rel="import" href="behavior.html">
<dom-module id="dg-button">
<template>
<style include="button-styles"></style>
<!-- HERE I want the content of button-base.html -->
</template>
<script>
Polymer({
is: 'custom-button',
behaviors: [DG.ButtonBehavior]
});
</script>
</dom-module>
Styles and behavior work as they should.
The problem is: I am not sure how to get content of button-base.html into the specified place of the local DOM without defining button-base as yet another element and then using it as <button-base></button-base>.
The reasons I want to avoid converting it to the new element are:
I want the content of button-base to be a first-class citizen of the custom-button element's local DOM so that all the methods defined in the behavior would still apply using just this.myMethod() for buttons that do not import button-base and rather use custom local DOM.
I need to be able to declaratively set properties on this new custom-button so that they get reflected on DOM elements within button-base.html automatically.
For example, the content of the button-base.html is as follows:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<paper-button id="internalButton" raised$="[[raised]]">
<span id="defaultContent">
<content></content>
</span>
</paper-button>
I would like to set raised on my custom-button in a way that it gets mapped to paper-button automatically without proxying all of the possible attributes through a new element (in case I define base-button as a new element and import it as <base-button></base-button> in custom-button).
Any ideas on how to make this import work?
Related
So I need to add the attribute media="all" to these two link tags:
<link rel="stylesheet" href="/etc.clientlibs/farmers/clientlibs/clientlib-libraries.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/farmers/clientlibs/clientlib-base.css" type="text/css">
but my local HTML file is configured as:
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientlib.css # categories=['farmers.new.libraries','farmers.new.base']}" /> </sly>
It is a language called HTL, HTML Template Language. There's a way to add attributes via HTL but you need to create a whole java class in the back end and call it, it's a headache.
I want to know if I can add some javascript to append the attribute media="all" to the link tags to these specific CSS file path.
I was thinking of putting both paths inside a div and then with javascript find that div and append an attribute to each link tag inside that div.
var head = document.getElementsByTagName('head');
var element = document.createElement('link');
element.rel = 'stylesheet';
element.type = 'text/css';
element.href = '/etc.clientlibs/farmers/clientlibs/clientlib-libraries.css';
// Here's the magic
element.media = 'all';
head.appendChild(element, head.firstChild);
setTimeout(function () {
element.media = 'all';
});
A script tag is being created and I want to add async="" to this:
<!--/* Include Context Hub */-->
<sly data-sly-call="${clientlib.js # categories='granite.utils'}" />
<sly data-sly-resource="${'contexthub' # resourceType='granite/contexthub/components/contexthub'}" />
Yes, it looks fine. But your code has a mistake. You should get the first element from the collection to access <head></head> element.
var head = document.getElementsByTagName('head')[0];
Why would you do that? Just do not use the clientlib mechanism. Most frontend developers will use their IDEs to build and minify CSS and JS anyway so there is not much to be lost if you import those artifacts at buildtime and add the tags in your code directly in the way you need them.
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 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 have a jQuery template, and I would like to use a KnockOutJS template within this.
I cannot make this work as this example illustrates: http://jsfiddle.net/maate/bwmcR/1/.
However, it DOES work when the KnockOutJS template itself is placed outside the scope of the jQuery template as in this example: http://jsfiddle.net/maate/bwmcR/2/.
It seems that the problem is related to the scope of the template data variables (for instance, I can access the ${test} variable within the subTemplate).
Does anyone know how to make this work?
Br. Morten
The first example you have is just not valid. Although you want to create a sub-template it has to be in a separate script tag. You just can't embed templates within each other, you have to create them one after the other.
WRONG:
<script id="superTemplate" type="text/html">
...
<script id="subTemplate" type="text/html">
...
</script>
</script>
RIGHT:
<script id="superTemplate" type="text/html">
...
</script>
<script id="subTemplate" type="text/html">
...
</script>
When you applied the subtemplate on the ul, you defined what data it should be using with the foreach, so you won't be able to read the test as it is not a property on an item.
If you want you can pass it as a templateOption so it will be available on the subtemplate too.
<ul data-bind="template: { name: 'subTemplate', foreach: items, templateOptions: { testValue: 'Value' } }"></ul>
This way it will be available on the subtemplate.
<span data-bind="text: $item.testValue"></span>
Also, I wouldn't use the default jQuery template tags, it is much nicer with data-binding.
<div id="body" data-bind="template:{name: 'superTemplate'}"></div>
It will do the same, more or less, in the end. You can take a look here : http://jsfiddle.net/bwmcR/18/
In the main kid template file, I want it to have only div tags, each of which do only call a rendered kid file and paste content inside it. (like "include" function in php) but I don't know how to do this. Does someone have any ideas about it?
If you swap to genshi instead of the default kid you can do this with an include tag:
<xi:include href="menu.html" />
Swapping to genshi is fairly easy, I think its a matter of confuration only. The templates tags works otherwise the same. You should rename the extensions from .kid to .html though.
You can first define a "base_layout.kid" template:
<html xmlns:py="http://purl.org/kid/ns#">
<head>
<title>App Name - ${page_title}</title>
<link href="layout.css" type="text/css" rel="stylesheet" />
${page_specific_css()}
</head>
<body>
<h1>Now viewing: ${page_title} of App Name</h1>
<content>Default content</content>
<div class="footer">Page Footer Text</div>
</body>
</html>
Then replace the "content" tag in "page.kid" with whatever data you want:
<html py:layout="'base_layout.kid'"
xmlns:py="http://purl.org/kid/ns#">
<link py:def="page_specific_css()"
href="layout.css" type="text/css" rel="stylesheet" />
<div py:match="item.tag == 'content'">
<ul>
<li>Content Item 1</li>
<li>Content Item 2</li>
<li>Content Item 3</li>
</ul>
</div>
</html>
You can check whether you get the correct html in python shell (after removing all the identifiers used):
>>> import kid
>>> t = kid.Template("page.kid")
>>> print t.serialize()