在 {{/if}} 中打开 div 并稍后使用 meteor/blaze 关闭它

Question

我正在尝试做一些仅在 HTML/Blaze 中不可能的事情。

我的意思是我试图在 {{#if}} 中打开一个 div 而不在这个特定的 if 中关闭它。无法通过以下方式进行：

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

所以我找到了可以解决这个问题的方法。使用三大括号并在 JS 中生成 HTML 部分。

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

getContent() return 我的 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 似乎会自行关闭。

这是呈现的内容：

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

如果您想应用您提出的逻辑，必须在 JS 中准备完整正确的 HTML 元素。您可以按照以下方式进行设置。

在模板类型中：{{ 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; 
   }
}

在 {{/if}} 中打开 div 并稍后使用 meteor/blaze 关闭它

Opening a div in a {{/if}} and closing it later with meteor/blaze

html

javascript

if-statement

meteor

meteor-blaze