Открытие div в {{/if}} и ​​закрытие его позже с помощью meteor/blaze

Question

Я пытаюсь сделать что-то, что невозможно только в HTML/Blaze.

Я имею в виду, что я пытаюсь открыть div в {{#if}}, не закрывая его в этом конкретном if. Невозможно сделать это следующим образом:

{{#each getData}}
    {{#if equals this.level first}}
        <div><p>content</p>
    {{/if}}
    {{#if equals this.level last}}
        </div>
    {{/if}}}
{{/each}}

Поэтому я нашел что-то, что могло бы решить эту проблему. Используя тройные фигурные скобки и сгенерировать HTML-часть в JS.

{{#each getData}}
    {{{getContent this}}}
{{/each}}

getContent () возвращает мой HTML. Это выглядит так:

getContent(obj) {
    if (obj.level == first)
        return "<div><p>content</p>";
    if (obj.level == last)
        return "<p>content></div>";
    else
        return "<p>content</p>";
}

Он работает, он отображает HTML, но есть одна проблема. Див, который я открываю, кажется, закрывается сам.

Это то, что отображается:

<div><p>Content</p></div>
<p>content</p>
<p>content</p>

вместо:

<div><p>content</p>
     <p>content</p>
     <p>content</p>
</div

Я очень устал, я прошу прощения, если я не достаточно ясно, или если решение очевидно.

РЕДАКТИРОВАТЬ: То, что у меня есть сейчас, и он работает нормально, это следующее:

HTML

{{#with getDataFromButton}}
    {{formatData this}}
{{/with}}

JS

formatData(data) {
        var res = "";
        for (var i = 0; i < data.length; i++) {
            if (data[i]["level"] == 0) {
                if (res.length > 0)
                    res += "</div>";
                res += "<div class=\"whiteBox\"><p>" + data[i]["value"] + "</p>";
            }
            else if ('last' in data[i]) {
                res += "<p>" + data[i]["value"] + "</p></div>";
            }
            else {
                res += "<p>" + data[i]["value"] + "</p>";
            }
        }
        return res;
    },

Спасибо всем за разъяснения! И с новым годом (еще не поздно).

Answer 1

Это сделано из-за того, что браузер пытается исправить структуру HTML при любом изменении. Если вы используете Blaze, то HTML отображается на стороне клиента, и при любой оценке ваш вспомогательный код внедряется в DOM. Затем браузер получает этот HTML-код и пытается его исправить.

Лучшее решение - использовать простой шаблон

<div>
{{#each getData}}
     <p>content</p>
{{/each}}
</div>

Если вы хотите применить логику, которую вы представили, вы должны подготовить полный правильный элемент HTML в JS. Вы можете сделать это следующим образом.

В типе шаблона: {{ myFullCorrectNodeElement }}

В JS типа:

helpers: {
   myFullCorrectNodeElement() {
      let html = "";
      const data = Template.instance().getData;
      for(let i=0; i<data.length; i++) {
          // your logic
          if(i===0) {
             html += `<div><p>content</p>`  
             // there you can access to variables by syntax ${}
             // insde of ``, you can read about template strings from ES6
          }  
          // ... and rest of your logic
      }
      return html; 
   }
}