Setting HTML tag attribute with value containing HTML entity, via knockoutjs
How can I set the title attribute of an HTML tag via knockoutjs in a way that will cause any HTML entities in the tag contents to be evaluated and displayed (i.e. not escaped)?
Example:
<div data-bind="attr: { title: titleObservable }"></div>
In the above example, if titleObservable contains an HTML entity, it will not be rendered, rather the entity name will be displayed. See this fiddle for a working example. Notice that when you hover over the div, the title text contains ' instead of the apostrophe symbol.
I know that when setting the contents of an HTML tag with the knockoutjs text binding that HTML is escaped for security reasons (see this thread). I am assuming that this is what is happening to the entity in my title attribute. I also know that I can just embed the apostrophe directly into the title attribute, but I would like to know if there is a way that I can do this with the HTML entities (due to certain limitations on the project I am working on).
html knockout.js html-entities
edited Nov 19 '18 at 16:11
Cœur
17.7k9106145
asked Apr 2 '13 at 23:22
KSletmoeKSletmoe
698722
add a comment |
How can I set the title attribute of an HTML tag via knockoutjs in a way that will cause any HTML entities in the tag contents to be evaluated and displayed (i.e. not escaped)?
Example:
<div data-bind="attr: { title: titleObservable }"></div>
In the above example, if titleObservable contains an HTML entity, it will not be rendered, rather the entity name will be displayed. See this fiddle for a working example. Notice that when you hover over the div, the title text contains ' instead of the apostrophe symbol.
I know that when setting the contents of an HTML tag with the knockoutjs text binding that HTML is escaped for security reasons (see this thread). I am assuming that this is what is happening to the entity in my title attribute. I also know that I can just embed the apostrophe directly into the title attribute, but I would like to know if there is a way that I can do this with the HTML entities (due to certain limitations on the project I am working on).
html knockout.js html-entities
edited Nov 19 '18 at 16:11
Cœur
17.7k9106145
asked Apr 2 '13 at 23:22
KSletmoeKSletmoe
698722
add a comment |
How can I set the title attribute of an HTML tag via knockoutjs in a way that will cause any HTML entities in the tag contents to be evaluated and displayed (i.e. not escaped)?
Example:
<div data-bind="attr: { title: titleObservable }"></div>
In the above example, if titleObservable contains an HTML entity, it will not be rendered, rather the entity name will be displayed. See this fiddle for a working example. Notice that when you hover over the div, the title text contains ' instead of the apostrophe symbol.
I know that when setting the contents of an HTML tag with the knockoutjs text binding that HTML is escaped for security reasons (see this thread). I am assuming that this is what is happening to the entity in my title attribute. I also know that I can just embed the apostrophe directly into the title attribute, but I would like to know if there is a way that I can do this with the HTML entities (due to certain limitations on the project I am working on).
html knockout.js html-entities
edited Nov 19 '18 at 16:11
Cœur
17.7k9106145
asked Apr 2 '13 at 23:22
KSletmoeKSletmoe
698722
How can I set the title attribute of an HTML tag via knockoutjs in a way that will cause any HTML entities in the tag contents to be evaluated and displayed (i.e. not escaped)?
Example:
<div data-bind="attr: { title: titleObservable }"></div>
In the above example, if titleObservable contains an HTML entity, it will not be rendered, rather the entity name will be displayed. See this fiddle for a working example. Notice that when you hover over the div, the title text contains ' instead of the apostrophe symbol.
I know that when setting the contents of an HTML tag with the knockoutjs text binding that HTML is escaped for security reasons (see this thread). I am assuming that this is what is happening to the entity in my title attribute. I also know that I can just embed the apostrophe directly into the title attribute, but I would like to know if there is a way that I can do this with the HTML entities (due to certain limitations on the project I am working on).
html knockout.js html-entities
html knockout.js html-entities
edited Nov 19 '18 at 16:11
Cœur
17.7k9106145
asked Apr 2 '13 at 23:22
KSletmoeKSletmoe
698722
edited Nov 19 '18 at 16:11
Cœur
17.7k9106145
asked Apr 2 '13 at 23:22
KSletmoeKSletmoe
698722
edited Nov 19 '18 at 16:11
Cœur
17.7k9106145
edited Nov 19 '18 at 16:11
Cœur
17.7k9106145
edited Nov 19 '18 at 16:11
Cœur
17.7k9106145
17.7k9106145
asked Apr 2 '13 at 23:22
KSletmoeKSletmoe
698722
asked Apr 2 '13 at 23:22
KSletmoeKSletmoe
698722
asked Apr 2 '13 at 23:22
KSletmoeKSletmoe
698722
698722
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The only way to use HTML entities within Javascript (which Knockout bindings use) is through innerHTML. All other access to the DOM uses UTF-8 text.
I suggest that you update your code to use plain text within your model and only use HTML entities within actual HTML documents. But if you cannot do so, you can use a custom binding handler that converts from HTML to text before setting the DOM property. Here's one I just made that sets the title.
ko.bindingHandlers.myTitle = {
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
var d = document.createElement('div');
d.innerHTML = value;
element.title = d.innerText;
}
};
Example: http://jsfiddle.net/mbest/TMSHB/2/
answered Apr 3 '13 at 0:14
Michael BestMichael Best
15.6k13061
Oh, ok that makes sense. Thanks!
– KSletmoe
Apr 3 '13 at 0:38
The answer, while it works, doesn't make sense, because 1. you must html-encode certain characters like the ampersand sign, 2. jquery is also javascript and doesn't have this problem
– santiago arizti
Jul 20 '18 at 15:05
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f15776218%2fsetting-html-tag-attribute-with-value-containing-html-entity-via-knockoutjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The only way to use HTML entities within Javascript (which Knockout bindings use) is through innerHTML. All other access to the DOM uses UTF-8 text.
I suggest that you update your code to use plain text within your model and only use HTML entities within actual HTML documents. But if you cannot do so, you can use a custom binding handler that converts from HTML to text before setting the DOM property. Here's one I just made that sets the title.
ko.bindingHandlers.myTitle = {
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
var d = document.createElement('div');
d.innerHTML = value;
element.title = d.innerText;
}
};
Example: http://jsfiddle.net/mbest/TMSHB/2/
answered Apr 3 '13 at 0:14
Michael BestMichael Best
15.6k13061
Oh, ok that makes sense. Thanks!
– KSletmoe
Apr 3 '13 at 0:38
The answer, while it works, doesn't make sense, because 1. you must html-encode certain characters like the ampersand sign, 2. jquery is also javascript and doesn't have this problem
– santiago arizti
Jul 20 '18 at 15:05
add a comment |
The only way to use HTML entities within Javascript (which Knockout bindings use) is through innerHTML. All other access to the DOM uses UTF-8 text.
I suggest that you update your code to use plain text within your model and only use HTML entities within actual HTML documents. But if you cannot do so, you can use a custom binding handler that converts from HTML to text before setting the DOM property. Here's one I just made that sets the title.
ko.bindingHandlers.myTitle = {
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
var d = document.createElement('div');
d.innerHTML = value;
element.title = d.innerText;
}
};
Example: http://jsfiddle.net/mbest/TMSHB/2/
answered Apr 3 '13 at 0:14
Michael BestMichael Best
15.6k13061
Oh, ok that makes sense. Thanks!
– KSletmoe
Apr 3 '13 at 0:38
The answer, while it works, doesn't make sense, because 1. you must html-encode certain characters like the ampersand sign, 2. jquery is also javascript and doesn't have this problem
– santiago arizti
Jul 20 '18 at 15:05
add a comment |
The only way to use HTML entities within Javascript (which Knockout bindings use) is through innerHTML. All other access to the DOM uses UTF-8 text.
I suggest that you update your code to use plain text within your model and only use HTML entities within actual HTML documents. But if you cannot do so, you can use a custom binding handler that converts from HTML to text before setting the DOM property. Here's one I just made that sets the title.
ko.bindingHandlers.myTitle = {
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
var d = document.createElement('div');
d.innerHTML = value;
element.title = d.innerText;
}
};
Example: http://jsfiddle.net/mbest/TMSHB/2/
answered Apr 3 '13 at 0:14
Michael BestMichael Best
15.6k13061
The only way to use HTML entities within Javascript (which Knockout bindings use) is through innerHTML. All other access to the DOM uses UTF-8 text.
I suggest that you update your code to use plain text within your model and only use HTML entities within actual HTML documents. But if you cannot do so, you can use a custom binding handler that converts from HTML to text before setting the DOM property. Here's one I just made that sets the title.
ko.bindingHandlers.myTitle = {
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
var d = document.createElement('div');
d.innerHTML = value;
element.title = d.innerText;
}
};
Example: http://jsfiddle.net/mbest/TMSHB/2/
answered Apr 3 '13 at 0:14
Michael BestMichael Best
15.6k13061
answered Apr 3 '13 at 0:14
Michael BestMichael Best
15.6k13061
answered Apr 3 '13 at 0:14
Michael BestMichael Best
15.6k13061
answered Apr 3 '13 at 0:14
Michael BestMichael Best
15.6k13061
15.6k13061
Oh, ok that makes sense. Thanks!
– KSletmoe
Apr 3 '13 at 0:38
The answer, while it works, doesn't make sense, because 1. you must html-encode certain characters like the ampersand sign, 2. jquery is also javascript and doesn't have this problem
– santiago arizti
Jul 20 '18 at 15:05
add a comment |
Oh, ok that makes sense. Thanks!
– KSletmoe
Apr 3 '13 at 0:38
The answer, while it works, doesn't make sense, because 1. you must html-encode certain characters like the ampersand sign, 2. jquery is also javascript and doesn't have this problem
– santiago arizti
Jul 20 '18 at 15:05
Oh, ok that makes sense. Thanks!
– KSletmoe
Apr 3 '13 at 0:38
Oh, ok that makes sense. Thanks!
– KSletmoe
Apr 3 '13 at 0:38
The answer, while it works, doesn't make sense, because 1. you must html-encode certain characters like the ampersand sign, 2. jquery is also javascript and doesn't have this problem
– santiago arizti
Jul 20 '18 at 15:05
The answer, while it works, doesn't make sense, because 1. you must html-encode certain characters like the ampersand sign, 2. jquery is also javascript and doesn't have this problem
– santiago arizti
Jul 20 '18 at 15:05
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f15776218%2fsetting-html-tag-attribute-with-value-containing-html-entity-via-knockoutjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
