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

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

0 голосов
/ 24 января 2019

Я пытаюсь сделать что-то, что невозможно только в 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;
    },

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

1 Ответ

0 голосов
/ 24 января 2019

Это сделано из-за того, что браузер пытается исправить структуру 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; 
   }
}
...