Установка атрибута HTML-тега со значением, содержащим объект HTML, черезknockoutjs

Как я могу установить атрибут title тега HTML с помощью Knockoutjs таким образом, чтобы любые объекты HTML в содержимом тега оценивались и отображались (т.е. не экранировались)?

Пример:

<div data-bind="attr: { title: titleObservable }"></div>

В приведенном выше примере, если titleObservable содержит объект HTML, он не будет отображаться, вместо этого будет отображаться имя объекта. См. этот fiddle для рабочего примера. Обратите внимание, что когда вы наводите курсор на div, текст заголовка содержит ' вместо символа апострофа.

Я знаю, что при установке содержимого тега HTML с текстовой привязкой к нокауту этот HTML экранируется по соображениям безопасности (см. эта тема). Я предполагаю, что это то, что происходит с сущностью в моем атрибуте title. Я также знаю, что могу просто вставить апостроф непосредственно в атрибут title, но я хотел бы знать, есть ли способ сделать это с объектами HTML (из-за определенных ограничений проекта, над которым я работаю).


html knockout.js html-entities
person KSletmoe    schedule 02.04.2013    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Единственный способ использовать объекты HTML в Javascript (который используют привязки Knockout) — через innerHTML. Весь другой доступ к DOM использует текст UTF-8.

Я предлагаю вам обновить свой код, чтобы использовать обычный текст в вашей модели и использовать объекты HTML только в реальных документах HTML. Но если вы не можете этого сделать, вы можете использовать пользовательский обработчик привязки, который преобразует HTML в текст перед установкой свойства DOM. Вот один, который я только что сделал, который устанавливает название.

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;
    }
};

Пример: http://jsfiddle.net/mbest/TMSHB/2/

person Michael Best    schedule 03.04.2013
comment
О, хорошо, это имеет смысл. Спасибо! - person KSletmoe; 03.04.2013
comment
Ответ, пока он работает, не имеет смысла, потому что 1. вы должны html-кодировать определенные символы, такие как знак амперсанда, 2. jquery также является javascript и не имеет этой проблемы. - person santiago arizti; 20.07.2018