Skip to content

Issue #14 Fix #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Issue #14 Fix #15

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c52a41f
Fix class="list-group-item}" to "list-group-item"
MSoup Feb 27, 2022
68c7155
Merge pull request #1 from MSoup/MSoup-list-group-item
MSoup Feb 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions manuscript/02.ECMAScript2015.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ If you take a look at the ES5 that this gets compiled down to, it makes a whole

Looking at this compiled code with such a simple example also makes this syntax seems a little silly, but it gets a whole lot more interesting when you consider a more real-world example. For instance, let's assume we want to use this chunk of HTML as a template to render the details of a Todo:

<div todo='[[Todo ID]]' class="list-group-item}">
<div todo='[[Todo ID]]' class="list-group-item">
<i class="[[ If Todo is complete, then "hidden" ]] text-success glyphicon glyphicon-ok"></i>
<span class="name">[[Name]]</span>
</div>
Expand All @@ -112,7 +112,7 @@ So, let's avoid all of that by converting this into a string template instead.
The first thing to do is wrap the HTML in backticks.

container.innerHTML = `
<div todo='[[Todo ID]]' class="list-group-item}">
<div todo='[[Todo ID]]' class="list-group-item">
<i class="[[ If Todo is complete, then "hidden" ]] text-success glyphicon glyphicon-ok"></i>
<span class="name">[[Name]]</span>
</div>
Expand All @@ -132,7 +132,7 @@ Then, rather than doing those search-and-replace operations, we can insert the v
}

container.innerHTML = `
<div todo='${todo.id}' class="list-group-item}">
<div todo='${todo.id}' class="list-group-item">
<i class="[[ If Todo is complete, then "hidden" ]] text-success glyphicon glyphicon-ok"></i>
<span class="name">${todo.name}</span>
</div>
Expand All @@ -143,7 +143,7 @@ One of the cool things about string templates is that you don't have to restrict
For example, I can figure out whether or not to render the "hidden" class on the icon element dynamically by introducing a conditional statement right there in the expression, like this:

container.innerHTML = `
<div todo='${todo.id}' class="list-group-item}">
<div todo='${todo.id}' class="list-group-item">
<i class="${ todo.completed ? "" : "hidden" } text-success glyphicon glyphicon-ok"></i>
<span class="name">${todo.name}</span>
</div>
Expand All @@ -153,7 +153,7 @@ When the value of todo.completed is true, the expression will evaluate to an emp

{title="app.js"}
~~~
container.innerHTML = "\n\t <div todo='" + todo.id + "' class=\"list-group-item}\">\n\t <i class=\"[[ If Todo is complete, then \"hidden\" ]] text-success glyphicon glyphicon-ok\"></i>\n\t <span class=\"name\">" + todo.name + "</span>\n\t </div>\n\t";
container.innerHTML = "\n\t <div todo='" + todo.id + "' class=\"list-group-item\">\n\t <i class=\"[[ If Todo is complete, then \"hidden\" ]] text-success glyphicon glyphicon-ok\"></i>\n\t <span class=\"name\">" + todo.name + "</span>\n\t </div>\n\t";
~~~

Once again, inspecting the compiled JavaScript reveals that - even with inline conditional statements and everything - this syntax eventually just ends up as a series of concatenated strings and expressions.
Expand Down