This is the template of my element
<template>
<div>
<content select="div"></content>
<p>Test Para</p>
<content select="h5"></content>
</div>
<div>
<p>last paragrah</p>
</div>
And in my index file, I am using the custom element as follows
<test-clone id="testClone">
<h5>Testing clone</h5>
<h5>Testing clone2</h5>
<div>Hello World</div>
</test-clone>
When I clone the above element, the content insertion is getting messed up and the element is not cloned properly.
Included jsbin examples ( works only in chrome)
http://jsbin.com/zuruqomubo/edit?html,output
http://jsbin.com/xiqevugeyi/1/edit?html,output
Hat tip to user #nirav-alagiya for this answer:
polylabel1 : id of your div inside template of polymer element.
Polymer('ele-label', {
ready: function()
{
this.innerHTML=this.$.polylabel1.outerHTML;
}
attributeChanged: function()
{
this.innerHTML=this.$.polylabel1.outerHTML;
}
}
Related
I am using draft-js#0.11.7 and draft-convert#2.2.12
Ive tried the following three methods:
if (block.type === 'ordered-list-item') {
switch (block.depth) {
case 1:
return {
start: `<li className="list-inside list-loweralpha indent-6">`,
end: '</li>',
nest: '<ol>',
nestStart: '<ol>',
nestEnd: '</ol>',
};
case 2:
return (
<ol>
<li className="list-inside list-lowerroman indent-12">{block.text}</li>
</ol>
);
default:
return <li className="list-inside list-decimal" />;
}
}
This is the output:
This is the DOM:
As you can see:
The default (nested length 0) renders the <li> but no <ol> or </ol> which means every subsequent list will continue the numbering order after the last <li> in the DOM. If I had an <ul> before hand it would not start at 1.
The first nesting level renders the <ol> and </ol> tags correctly but removes my styles.
The second nested level renders a <ol><li></li></ol> for each block which means the numbering resets for each block.
I am just trying to mimic the functionality as seen in the DraftJS editor on the left.
If I remove any checking for list blocks in the convertToHTML section my lists are rendered correctly in the dom but are not styled and have no bullet points (list-style-type css property).
I have actually found a solution to this.
Method 1 is the preferred solution to correctly render the DOM elements, but styling only works with style="" and not className="".
The working return for the draft-js block type is:
return {
start: `<li
style="
list-style-position: inside;
list-style-type: lower-alpha;
text-indent: 1.5rem;"
>`,
end: '</li>',
nest: '<ol>',
nestStart: '<ol>',
nestEnd: '</ol>',
};
The Lists are now rendering as expected:
Tried to read about $compile, $parse and $eval however cannot get understand how to store a template in a variable then use it during rendering processes.
What I would like to achieve:
code:
const data = {
template: 'test {{foo}} some text {{bar}}',
}
html:
<p> some text </p>
<h1> <included in here: data.template> </h1>
result:
<p> some text </p>
<h1> test ... some text ... </h1>
Any ideas how to achieve this ?
By simple way you can create an html file for your template and use ng-include directive, so ng-include directive will the thing for you out of the box
my-template.html
<div>
<p> some text </p>
<h1> <included in here: data.template> </h1>
</div>
Or you can also create an ng-template on html page itself like shown below
<script type="text/ng-template" id="my-template.html">
<div>
<p> some text </p>
<h1> <included in here: data.template> </h1>
</div>
</script>
Usage:
Your consumer page
<ng-include
src="'my-template.html'">
</ng-include>
I understand by this solution you can end up creating multiple template html file or script templates. So other way around to solve this problem you can create your own directive and compile the content manually and render it inside a DOM manually.
Directive
.directive("dynamicContent", function($compile, $parse){
return{
link: function(scope, element, attrs) {
var linkFn = $parse(attrs.template);
var content = linkFn(scope)
// creating template wrapper around
var wrapper = `<div>${content}</div>`
var tempate = $compile(wrapper)(scope)
element.append(tempate);
}
}
});
Demo Plunker
When we use ReactDOM.render(<Component/>,document.getElementById("container")); The component gets rendered to the element mentioned. What if the div here already has some existing content inside it? Can React append the rendered component to it? e.g:
HTML:
<div id = "container">Hello, React!</div>
JSX:
var Component = React.createClass({
render: function(){
return(
<p>Hello to you too!</p>
)
}
})
ReactDOM.render(<Component/>, document.getElementById("container"));
As far as I can tell, this is the only way to do what you're asking (as I was trying to do the same thing):
let divs = document.getElementsByClassName("some_class")
for (let i = 0; i < divs.length; i++) {
const id = Math.random() //or some such identifier
const d = document.createElement("div")
d.id = id
divs[i].appendChild(d)
ReactDOM.render(<SomeComponent/>, document.getElementById(id))
}
If anyone knows of a cleaner/better way to append the react component to the existing <div> without first attaching the new empty <div>, please chime in!
When you render a react component in a div, its contents are being replaced by the contents of the component you created.
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div class = 'outer-container'>
<p>
I can see this hello.
</p>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
<p>
Hello React
</p>
</div>
</div>
JSX
var Hello = React.createClass({
render: function() {
return (
<div className="Button">
<span className="left" onClick={function() {alert("left")}}>Left</span>
<span className="right" onClick={function() {alert("right")}}>Right</span>
<span className="middle" onClick={function() {alert("middle")}}>Middle</span>
</div>
);
}
});
ReactDOM.render(<Hello name="World" />, document.getElementById('container'));
You can see a fiddle here: JSFIDDLE
You have to have some wrap container for the stuff that you don't want to be overridden. It's should be something like:
<div id='wrapper-container'>
<p>Hello, React! Content before</p>
<div id='container'></div>
<p>Content after</p>
</div>
Yes, keeping existing content is possible using dangerouslySetInnerHTML. Considering the name you may already guess that this is it not the most suggested way, but it works:
HTML:
<div id = "container">Hello, React!</div>
JS:
var Component = React.createClass({
render: function(){
return(
<div>{this.props.children}<p>Hello to you too!</p></div>
)
}
})
var c = document.getElementById("container");
ReactDOM.render(React.createElement(Component, {}, <div className="children"
dangerouslySetInnerHTML={{ __html: c.innerHTML }}></div>), c);
Check out this fiddle to see it in action.
The best way you can do it is to create another div element, then append it to the container, then get the Element id and render the component inside of it. That means each render will have it's own parents stand inside the container div.
I am trying to have certain content of a polymer element procedurally added, at a time later than its creation. I am trying to avoid a <template is="dom-if"> element.
Instead I am trying to have a nested <template> element inside the polymer element's template and have its content attached on the execution of a method, like so:
<dom-module id="simple-element">
<template>
<content id="content"></content>
<div id="display">display</div>
<template id="t">
template content
<script>console.log("template added!")</script>
</template>
</template>
<script>
var simpleElement = {
is: "simple-element",
attached : function(){
this.init();
},
init : function(){
var t = document.importNode(this.$.t.content,true);
this.$.display.appendChild(t);
},
}
Polymer(simpleElement);
</script>
</dom-module>
See it also in this jsbin http://jsbin.com/zudituvuli/edit?html,js,console,output
Is there a way to accomplish this?
In my AngularJS directive, I want to apply focus to the first child of type <pre> of the last child of type <div>.
That is if my document looks like this:
<div main-div>
<div>
</div>
<div>
<div>
<pre></pre>
</div>
</div>
<div>
<div>
<pre the-one></pre>
</div>
</div>
the <pre> it should select is the last one, with an attribute the-one.
Is there any way to do this?
if you have the structure above as a jqLite element (however you get it a hold of it), you could do the following:
var divs = element.children().find("div");
var theOne;
if (divs.length > 0){
theOne = angular.element(divs[divs.length-1]).find("pre");
}