Почему IE дает неожиданные ошибки при установке innerHTML
Вам не нужно создавать двух помощников. Работает только ваш первый помощник:
Template.hello.helpers({
pieces() {
let data = [{
"_id": "5c43b0e463ad7e8adfa4f07a",
"name": "The Box",
"price": "80",
"parts": [
{ "pname": "piccolo", "pprice": "3" },
{ "pname": "Flute 1", "pprice": "3" }
]
}]
return data;
}
});
Затем вы можете выполнять итерации по частям и частям. Если вы хотите получить доступ внутри вложенного # каждого имени элемента И имени элемента. Вы можете использовать {{../name}} для доступа к родительскому Datacontext.
<table class="table">
<tbody>
{{#each pieces}}
<tr class="itemList">
<td class="name">{{name}}</td>
<td class="pdf">PDF</td>
<td class="audio">AUDIO</td>
<td class="format">FORMAT</td>
<td class="price">${{price}}</td>
<td><input class="qty" type="number" name="quantity" value="0"></td>
</tr>
{{#each parts}}
<tr>
<td colspan="3">{{../name}}</td>
<td class="partName">{{pname}}</td>
<td class="partPrice">{{pprice}}</td>
<td><input class="partQty" type="number" name="quantity" value="0"></td>
</tr>
{{/each}}
{{/each}}
</tbody>
</table>
Но использование блока {{#each}} не очень хорошая практика, вы должны использовать {{#each in}} . Блок {{#each in}} создает переменную, которую вы можете легко использовать.
<table class="table">
<tbody>
{{#each piece in pieces}}
<tr class="itemList">
<td class="name">{{piece.name}}</td>
<td class="pdf">PDF</td>
<td class="audio">AUDIO</td>
<td class="format">FORMAT</td>
<td class="price">${{piece.price}}</td>
<td><input class="qty" type="number" name="quantity" value="0"></td>
</tr>
{{#each part in piece.parts}}
<tr>
<td colspan="3">{{piece.name}}</td>
<td class="partName">{{part.pname}}</td>
<td class="partPrice">{{part.pprice}}</td>
<td><input class="partQty" type="number" name="quantity" value="0"></td>
</tr>
{{/each}}
{{/each}}
</tbody>
</table>
8 ответов
"По-видимому, Firefox не это придирчивое" ==>, По-видимому, FireFox так ошибочен, что он не регистрирует это очевидное нарушение основных вложенных HTML правил...
Как кто-то указал на другом форуме, FireFox примет, что Вы добавляете весь документ HTML как ребенок поля формы или даже изображения, - (
Вы видите, что поведение, потому что innerHTML только для чтения для элементов таблицы в IE. Из innerHTML документации Свойства MSDN:
Свойство является чтением-записью для всех объектов кроме следующего, для которого это только для чтения: СТОЛБЕЦ, COLGROUP, FRAMESET, ГОЛОВА, HTML, СТИЛЬ, ТАБЛИЦА, TBODY, TFOOT, THEAD, ЗАГОЛОВОК, TR.
Не знайте, почему Вы - вниз-modded для вопроса Stu, поскольку это - что-то, что я решил совсем недавно. Прием должен 'впрыснуть' HTML в элемент DOM, который в настоящее время не присоединен к дереву документов. Вот фрагмент кода, который делает это:
// removing the scripts to avoid any 'Permission Denied' errors in IE
var cleaned = html.replace(/<script(.|\s)*?\/script>/g, "");
// IE is stricter on malformed HTML injecting direct into DOM. By injecting into
// an element that's not yet part of DOM it's more lenient and will clean it up.
if (jQuery.browser.msie)
{
var tempElement = document.createElement("DIV");
tempElement.innerHTML = cleaned;
cleaned = tempElement.innerHTML;
tempElement = null;
}
// now 'cleaned' is ready to use...
Обратите внимание, что мы используем только использование jQuery в этом отрывке здесь для тестирования на то, является ли браузером IE, нет никакой трудной зависимости от jQuery.
Вы попытались установить innerText и/или textContent? Некоторые узлы (как ТЕГИ SCRIPT) не будут вести себя как ожидалось, когда Вы попытаетесь изменить их innerHTML в IE. Больше здесь о innerText по сравнению с textContent:
http://blog.coderlab.us/2006/04/18/the-textcontent-and-innertext-properties/
проверьте объем элемента, Вы пытаетесь установить innerHTML., так как FF и IE обрабатывают это по-другому
Вы устанавливаете совершенно другой innerHTML или заменяете шаблон в innerHTML? Я спрашиваю, потому что, при попытке сделать тривиальный поиск/замену через 'питание' innerHTML, Вы найдете некоторые типы элемента, не играя в IE.
Это может быть осторожно исправлено путем окружения попытки в попытке/выгоде и пузырения DOM через parentNode, пока Вам успешно не удается сделать это.
Но это не будет подходящим при вставке совершенно нового содержания.
Я просто выяснил, что, при попытке установить innerHTML на элементе в IE, который не логически корректен, это бросит эту ошибку. Например, при попытке установить innerHTML таблицы к "привет от stu то", это перестанет работать, потому что таблица должна сопровождаться последовательностью. По-видимому, Firefox не это придирчивое. Надежда это помогает.