Comments (10)
What @fprijate is asking for sounds to me like protection from XSS vulnerabilities. Speaking for myself, I would not expect HTML content added to $text
to be active; that sounds like a pretty big security hole actually. In fact, if you do add an $html
, I would recommend naming it something like $unsafeHtml
instead to make it very clear that it must never be used to insert anything that comes from user content.
from cell.
Why not use innertext
for $text
and innerHTML
for $html
?
from cell.
Thanks for the suggestion, I just realized I forgot to mention how to create text nodes on the tutorial. Just added it. intercellular/tutorial@d7ec6e1
But I'll share it again here just for reference:
To create plain text nodes, you use $type: "text"
. For example, if you wanted to express something like this:
<div class='row'>
<img src="http://localhost/img.jpg"> Plain text
</div>
You would write
Row = {
class: "row",
$components: [{
$type: "img",
src: "http://localhost/img.jpg"
}, {
$type: "text",
$text: "Plain Text"
}]
}
Now, as for why the attribute name is $text
instead of $html
(even though internally it uses innerHTML
): It was because I actually don't want think it's good to use this for HTML.
Of course no one is stopping one from using HTML expressions inside (and sometimes it might be a nifty feature) but if we actually name the attribute $html
, we're basically promoting that "you're supposed to use HTML instead of plain text expressions here", which is not what we want.
Hope this makes sense. Let me know if you have further questions or arguments. Love to discuss further
from cell.
Thanks for response.
I understood this before (from examples and my own code).
My intention is to get from:
Row = {
$type: "div",
class: "row",
$text: " <span> test </span>"
}
<div class='row'>
< span > test </span>
</div>
instead of
<div class='row'>
<span> test </span>
</div>
Of course I can always make something like this:
Row = {
$type: "div",
class: "row",
$text: " <span> test </span>".replace(/</g, "<").replace(/>/g, ">");
}
or call jQuery $().html() function.
IMHO $text name is little misleading.
Also it's only used with plain text in documentation.
If compatibility is a problem, then we should have $text , $plaintext attributes
instead.
By the way , I forgot to say you, that cell.js is brilliant.
It's simple and powerful at the same time.
Thanks
from cell.
Typical use of HTML expression in text is:
. . .
$text: "this is <i> italic </i> text. "
. . .
from cell.
Wait, I feel like I'm misunderstanding you. Why do you need to this:
<div class='row'>
< span > test </span>
</div>
instead of:
<div class='row'>
<span> test </span>
</div>
from cell.
We are doing it all the time when we put a program code into some div or pre element
Iwant to do this
{
$cell: true,
$type: "pre",
$text: "this is a span example: <span> test </span>"
}
from cell.
Can this be clossed? Seems to be fixed in master...
from cell.
@fprijate this issue has been addressed in #114
from cell.
Thanks to @devsnek now we have $html
. I wrote a quick demo to test this. It takes a Handlebars template, parses it, and integrates it into Cell. Check it out: https://play.celljs.org/items/1mQfq1/edit
I think this feature is way cooler than I first expected!
from cell.
Related Issues (20)
- Define a variable's attribute using another attribute of itself HOT 1
- Devise a way to express CSS in cell HOT 1
- $update not fired when components have a $init defined HOT 2
- Cell Native? HOT 5
- Safari Issues HOT 2
- Assigning $text from component won't update DOM. HOT 4
- $update not being triggered/called HOT 1
- ES6 functions HOT 1
- Distinguish between SVG <text> elements and normal text HOT 1
- Scoped CSS HOT 1
- Break out createElementNS(Hardcoded) into Monkey-Patchable Function - GeneReader ? HOT 1
- Can you share an example with react components?
- Suggestion : Limiting complexity of inter-cell dependency HOT 1
- js-framework-benchmark
- Select multiple and attribute order
- Handy way to get cell components
- Injecting CellJs via external file HOT 1
- Using web components with Cell
- mutation of a cell HOT 1
- Development Moved to https://github.com/jasonelle/jasonelle HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cell.