Develop Reference

How to use bindings inside raw html?

How can one use dynamic attributes and bindings while rendering raw html. Suppose:
<script>
let name = 'Joseph'
let test = '<p>{name}</p>'
</script>
{#html test} <!-- Outputs: {name} instead of Joseph -->
I know, one would answer that, a better approach to this would be creating a component. But still I want to ask, if there is a way of using bindings inside raw html rendering?

You can't. But you can do this: {#html `<p>${name}</p>`}

why handlebars compile the script template as CDATA

I write a function which compile a handlebars template and append to the html.
I use thousands times of handlebars template in my project and all things go well.
I have to mention it'll be rendered properly in localhost, but in the server it returns me with CDATA.
but in this case handlebars outputs like this and causes lots of problems.below is template html which is inside template.php file
<script id="w-l-template" type="text/x-handlebars-template">
<div data-name="name{{ID}}"></div>
.....
</script>
here is function inside a js file called my.js
var num = 2;
function add_name(){
var out = $('#w-l-template').html();
var template = Handlebars.compile(out);
var data={
ID:num
}
var res=template(data);
$('[data-main-content="main"]').append(res);
num = num+1;
}
$(document).on('click', '#add', function(){
add_name();
});
but after being rendered by handlebars, I'll get CDATA at the first line like this
<!--[CDATA[*/<div class="col-lg-12 "data-name="2"-->

I know this answer is kind of late, but I had a similar issue today. I found out that Handlebars isn't adding the CDATA into my HTML, it's actually Drupal. We sometimes create pages with Drupal's inline editor, and so I'll drop in HTML via the Full HTML editor.
Unfortunately, if you don't configure the HTML editor in Drupal to NOT rewrite broken HTML -- it considers Handlebar script syntax as broken, then Drupal will attempt to fix the tag and add in CDATA which makes your tag get commented out. Handlebars will then try to template that new commented tag and also output a commented out tag. Frustrating! But hope my answer somewhat helps you with yours (or if you run into this situation again in the future).
Basically TL:DR, it's not Handlebars -- it's probably some setting in your PHP (or CMS that uses PHP) that is probably trying to "fix" the Handlebars template because it thinks the HTML is broken.

Adding jinja template dynamically

I have a jinja template that is the only content inside a set of div tags.
<div id="section0">
{% include 'temppage.html' %}
</div>
When I press a button, I want to replace everything between the tags with something else. I was hoping to replace it with another jinja template, "{% include 'realpage.html' %}", but first I am unsure of how to replace the entire section, instead of just replacing a single word. Second, can I even add a jinja template dynamically, or do I need replace it with a string with the contents of the file directly.

As glls said, replacing the content can be used with,
document.getElementById("section0").innerHTML = "something";
As for adding a jinja template dynamically, you need to replace the innerHTML with a multi-line string of the wanted jinja template, with is used with backticks, "`". So it would look like,
document.getElementById("section0").innerHTML = `{% include 'realpage.html' %}`;
The template is executed when the page loads (which is unavoidable as far as I'm aware), so when inspecting the html of the live page, the multi-line string will contain whatever is in the file you are including.

You could use a JS framework (such as Angular, React...) in order to achieve this...I am assuming you are trying to build a single page app?
Otherwise, you will have to rely more on Javascript in order to change the HTML under you div depending on what you click. For example, if you have button 1, 2, 3. Each rendering a different HTML template upon clicking.
Example (using jQuery):
$(document).on('click', '.some-class', function() {
document.getElementById("section0").innerHTML = "something";
});
fyi: "something" can be an html structure.

CKEditor setData adding P tag

When i am passing HTML to a CKEditor instance, a P tag is being inserted within the HTML producing unexpected results.
For example, with the following code:
CKEDITOR.instances["myEditor"].setData("<div>1</div><div>2</div>");
the editor does not display them as block elements (it outputs as "12" inline). Calling getData() and i see the HTML is reformatted incorrectly as:
"<div>
<p>
1</div><div>2</div></p>
"
I've played with the enterMode configuration based on some research but haven't found a magic combination. Any suggestions? (I am using 3.6.5)

I figured it out - we we're using regex to strip out some tags when pasting and this was also impacting initial values.

HTML generation in JS code

I'd like to know your thoughts about HTML code generation in my JS code.
I just think that the html.push("<tag>" + something + "</tag>") style pretty annoying.
I've already tried something with templates inside my HTML file (and put some placeholders therein), and then used its content to a replace the placeholders to my real values.
But maybe you guys have other ideas, possibly one using jQuery.

jQuery is the way to go. You can do things like this:
// create some HTML
var mySpan = $("<span/>").append("Something").addClass("highlight");
it is cross-browser compatible,
it is an easy to use syntax
There is also a templating plugin.

You can use createelement, appendchild, and innerHTML to do this.
Here's an article from A List Apart that uses these functions in the process of generating a dropdown menu.

jQuery has javascript template plugins like jBind and jTemplate. I haven't used them myself but I do recommend jQuery whenever possible.
A note on html generation, it is not searchable by search engines in most cases.

I'm a big fan of how PrototypeJS handles templates.
First you create an instance of the Template class and pass it a string containing the template HTML.
var tpl = new Template('Here is a link to #{sitename}');
Then you pass it data containing the values to replace within the template.
$('someDiv').innerHTML = tpl.evaluate( {link: 'http://www.stackoverflow.com', sitename: 'StackOverflow'} );
In the above example, I have a div with id="someDiv" and I'm replacing the contents of the div with the result of the template evaluation.

Resig has a little blog entry on creating a very lightweight template system.

There are a bunch of JQuery function that support this. In particular, you should look at append(content), appendTo(content) prepend(content) prependTo(content), replaceWith(content), after(content), before(content), insertAfter(content), and insertBefore(content).