Handlebars.js: 핸들바가 테이블에서 작동하지 않음

가치가 있기 때문에 {{each}} 태그가 테이블 외부에 배치되면 다른 태그가 작동합니다. 이것은 물론 테이블을 반복적으로 복제하는 경우 바람직하지 않은 영향을 미치지만 문제를 좁히는 데 도움이 될 수 있습니다.

http://jsfiddle.net/cwYhN/6/

이것은 jQuery나 다른 문제일 수 있는 것 같습니다... console.log(frag); 하면 핸들바로 컴파일을 시도하기 전에도 {{#each}} 도우미가 테이블 외부로 푸시되는 것을 볼 수 있습니다. ...

템플릿을 <script type="text/x-handlebars-template"></script> 태그 안에 넣도록 jsfiddle을 업데이트했는데 제대로 작동하는 것 같습니다...

http://jsfiddle.net/doowb/6GdPy/1/

네, 저는 방금 다음과 같은 사실을 발견했습니다.
http://jsfiddle.net/cwYhN/10/

그만한 가치가 있는 것은 브라우저가 jquery 결함이 아니라 유효하지 않은 html로 간주되는 것을 버리는 것이라고 생각합니다.

예, jQuery가 호출하는지 아니면 jQuery가 호출하는 기본 브라우저 기능인지 확신할 수 없었습니다. 어느 쪽이든, tbody 와 tr 사이의 {{ }} 가 마음에 들지 않습니다.

핸들바가 이 제약 조건 내에서 작동하는 방식으로 구축되면 좋을 것입니다. 예를 들어, 태그의 내용을 반복한다는 것을 암묵적으로 이해하면서 태그 내에 "각각"을 배치할 수 있습니다. 다음과 같다고 상상할 수 있습니다.

<table>
  <tbody handlebars="{{each}}">
    ... these get iterated ...
  </tbody>
</table>

이와 같은 것을 허용하면 브라우저가 중요한 각 문장을 제거하는 것을 방지할 수 있으며, 브라우저가 속한 닫는 태그(/tbody)를 피기백할 수 있습니다.

여러분이 이미 언급했듯이 HTML 파서는 핸들바 마크업으로 인해 혼동되어 핸들바 템플릿으로 변환하려고 하는 DOM 구조로 이를 나타냅니다.

            {{#each activity}}

            {{/each}}
        <table style="border:1px solid #ccc;">
        <thead>
            <tr><th>Month</th>
            <th>Imps</th>
            <th>Clicks</th>
            <th>Spend</th>
        </tr></thead>
        <tbody><tr>
                <th>{{month}}</th>
                <td>{{impressions}}</td><td>{{clicks}}</td><td>{{spend}}</td>
            </tr></tbody>
    </table>

이 문제를 해결하려면 위의 스크립트 동작, 자바스크립트 문자열 또는 사전 컴파일과 같은 것을 사용해야 합니다.

이 문제를 종료하는 것은 핸들바 자체의 버그보다 브라우저 구현 세부 사항에 가깝습니다.

{{#each}}가 테이블에서 작동하지 않는다는 것을 알기 전에 반나절을 낭비했습니다. 이것이 단순히 문서에 명시되어 있다면 정말 도움이 될 것입니다.

각각은 제대로 로드되면 테이블에서 완벽하게 작동합니다. 템플릿을 어떻게 로드하고 있습니까?

@preichelt 브라우저가 테이블에서 {{#each}}를 엉망으로 만드는 것을 방지하려면 스크립트 태그 내에서 핸들바를 로드해야 합니다. 스택 오버플로에 대해 자세히 알아볼 수 있습니다.

http://stackoverflow.com/questions/15386276/why-should-we-wrap-our-templates-inside-script-blocks

이 버그는 내 인생의 두 시간을 낭비했고 지금은 토요일 오후 10시 30분입니다. 이 문제를 발견할 때까지 이 버그를 해결하기 위해 사무실에서 일하고 있습니다. 그리고 [Official Block Doc]
(http://handlebarsjs.com/builtin_helpers.html) 그것에 대해 아무 말도하지 않습니다.

명확하지 않은 경우 핸들바의 잘못이 아니라 HTML 작동 방식을 모르는 귀하 의 잘못입니다. https://html.spec.whatwg.org/multipage/syntax.html#an -introduction-to-error - 파서에서 처리 및 이상한 경우

따라서 Handlebarsjs를 사용하려는 모든 사람이 HTML 파서의 작동 방식을 잘 이해하고 있어야 한다고 가정합니까? 그리고 그렇지 않다면 문서의 명확성의 잘못이 아니라 _사용자의 잘못_입니까? 이 가정은 말이 되지 않습니다. 또 다른 무겁고 복잡한 템플릿 엔진인 Angularjs는 Html 호환 구문을 템플릿 구문으로 사용합니다. 예를 들어 테이블을 반복해야 하는 경우 다음을 사용할 수 있습니다.

<tr ng-repeat="dto in tableData">

그리고 Angularjs는 Html 주석을 사용하여 루프의 내부 상태를 유지합니다.

<!-- ngRepeat: column in row -->
<tr ng-repeat="dto in tableData">

Angualrjs는 Html의 구문을 최대한 존중하고 따르고 가정을 성공적으로 피하려고 합니다. 그러나 Handlebarsjs의 템플릿 구문은 그렇지 않으므로 Html 파서 문제를 사용자에게 노출합니다.
개발자가 문제를 옆에서 해결할 수 없는 경우 프로젝트와 전 세계의 사용자에 대해 정말로 관심이 있다면 사용자에게 문제를 인식하도록 알릴 _의무_가 있습니다.
어쨌든, 나는 문서 문제를 열 ​​것입니다. _ 나는이 두통 문제를 처음 접한 사람이 아니며 마지막 문제도 아닐 것이라고 믿습니다. _

Angular는 DOM에서 실행되므로 DOM을 인식합니다. 핸들바는 문자열로만 작동하며 DOM 개념이 없습니다.

@profullstack : @stevenvachon이 말했듯이 핸들바는 HTML에서 작동하지 않고 텍스트에서만 작동합니다. 그러나 모든 예제가 HTML이기 때문에 문서에서는 명확하지 않을 수 있습니다. 그것은 개인적으로 마크 다운을 생성하는 데도 사용합니다 ...

문서에 어떤 종류의 텍스트가 필요했는지 말씀해 주시면 기꺼이 추가하겠습니다. 그러나 일반적인 사용 지침( <script> -tag가 있는 부분 포함)은 이미 http://handlebarsjs.com/ 의 기본 페이지에

@profullstack 나는 당신이 "시간 낭비"를 하는 것에 대해 좌절감을 느낀다는 것을 이해하지만, 제 생각에는 당신은 이것을 완전히 거꾸로 생각하고 있습니다.

오픈 소스 프로젝트나 기여자는 귀하에게 어떠한 의무도 없습니다. 핸들바와 같은 도구는 다른 개발자의 삶을 더 쉽게 만들기 위해 거의 무료로 만들어지고 유지 관리됩니다. 오픈 소스 프로젝트를 사용할 수 없었다면 작업 시간은 얼마나 걸렸을까요?

직접 와서 이런 어조로 댓글을 쓰는 것은 원하는 효과와 반대되는 결과를 가져올 수 있다는 점을 먼저 말씀드릴 수 있습니다. 간단한 당근 대 채찍, 누군가가 당신을 위해 무언가를 해 주기를 원한다면 친절하게 요청하거나 더 나은 PR을 올리고 스스로하십시오.

@ErisDS 조언 감사합니다. 내 첫 번째 의견이 너무 강력했을 수도 있지만 다음과 같은 귀하의 말에 전적으로 동의합니다.

to try to making other developers lives easier

그리고 왜 Handlebarsjs를 사용하기 위해 Angularjs를 삭제합니까? _ 나는 Handlebarsjs가 Angularjs보다 내 삶을 더 쉽게 만들어 줄 것이라고 믿기 때문입니다._
따라서 수천 명의 오픈 소스 사용자가 "다른 개발자의 삶을 더 쉽게 만드는" 당신의 의지에 반하는 잠재적인 문제를 방지할 수 있도록 설명서에 주의 사항을 몇 가지 추가하십시오. 나는 그것이 아니다라고 생각한다.
을위한:

No open source project nor contributor has any duty to you.

그래 그건 사실이야. 오픈 소스 프로젝트를 시작한 다음 삭제할 수 있습니다. 완전히 괜찮습니다. 그러나 프로젝트가 성장하면 프로젝트에 더 많은 시간과 마음을 할애하고 프로젝트에 대해 더 많이 사랑하게 되며 세상과 공유하기를 원하게 됩니다. 이때 _사용자에 대한 관심_과 _문서에 대한 관심_을 시작하게 됩니다. Handlebarsjs는 이 단계에 있으며, 이것은 작은 프로젝트가 아니며, 한국, 중국 등 전 세계의 프로그래머들이 사용하는 인기 있는 프로젝트입니다.
내가 아는 한, Github의 대부분의 오픈 소스 프로그래머는 자신의 프로젝트와 README.md 파일을 자랑스럽게 생각하며 점점 더 많은 사람들이 자신의 도구와 코드를 사용하기를 바랍니다.
그래서 만약:

• 오픈 소스 사용자에 대해 관심을 갖고 싶지 않습니다.
• 나는이 문제를 접할 마지막 사람입니다
  첫 번째 댓글의 기술적 분석과 이 댓글의 사용자 친화적인 토론을 완전히 무시할 수 있습니다.
  게다가 오픈 소스 프로젝트는 당신이 세상에 주는 _자선_과 같은 것이 아니라 당신과 다른 프로그래머 사이의 _커뮤니케이션 브리지_입니다.

@nknapp 답변 감사합니다.
제 첫 댓글이 너무 강해서 그런 점과 제 댓글을 읽어주신 분들께 사과드립니다.
첫눈에 핸들바는 _텍스트 대체 도구_처럼 작동하며 이해하기 정말 쉽습니다. 그래서 내가 다음과 같이 쓸 때 :

{{#each myListData}}
                        <tr>{{name}}</tr>
{{/each}}

단순한 교체라면 다음과 같이 예상됩니다.

<tr>nameA</tr>
<tr>nameB</tr>

그러나 HTML을 접했을 때, 그것은 뭔가 다르게 동작합니다. 그것은 본성 때문입니다.
따라서 "각 블록 도우미" 섹션 아래에는 한 문장이면 충분합니다.

WARNING: please use script block when you try to use #each block inside table, due to the know issue of [How HTML parse works(thanks for <strong i="18">@stevenvachon</strong>'s reference](https://html.spec.whatwg.org/multipage/syntax.html#an-introduction-to-error-handling-and-strange-cases-in-the-parser)

의견을 공유해 주시면 정말 감사하겠습니다. 감사 해요.

문제는 이것이 #each -helper와 아무 관련이 없다는 것입니다. 당신은 HTML에 직접 템플릿을 작성해서는 안됩니다. 이와 같은 진술은 메인 페이지에 있어야 하지만 질문은: 당신이 그것을 읽었습니까?

방문 페이지의 예 아래에 귀하와 같은 경고가 있을 수 있습니다.

또 다른 참고 사항:

프로덕션에서는 스크립트 블록 방법을 사용하지 않습니다. 대신 Webpack이나 다른 도구를 사용하여 템플릿을 미리 컴파일합니다.

@nknapp 네, 귀하의 의견이 맞는 것 같습니다. 템플릿을 HTML에 직접 작성해서는 안 됩니다. 따라서 랜딩 페이지에서 첫 번째 "시작하기" 섹션은 스크립트를 예로 사용해야 하며 아래 회색 블록에서 변경할 수 있습니다.

You **can** deliver a template to the browser by including it in a <script> tag.

에게

You **should always** deliver a template to the browser by including it in a <script> tag.

나는 당신의 제안을 추측합니다 :

**never** write a template directly into HTML

모든 사람이 이를 따르고 많은 문제를 피할 수 있도록 랜딩 페이지에 게시해야 합니다. 좋은 생각인 것 같아요, 그렇게 생각하세요?

그러나 그 설명은 다음과 같이 이해할 수 있기 때문에 작동하지 않습니다.

<script type="text/x-handlebars">
  {{#each list as |item|}}
    <td>{{item}}</td>
  {{/each}}
</script>

@stevenvachon 예, 귀하의 예제에서는 스크립트 안에 템플릿을 넣는 것만으로는 충분하지 않습니다. 템플릿을 사용하는 올바른 방법에 대한 메모를 더 추가해야 할 수도 있습니다. 이에 대한 제안을 듣고 싶습니다.

혹시:

대부분의 프로덕션 애플리케이션의 경우 파서 및 문자열 템플릿을 사용하고 싶지 않을 것입니다. 사전 컴파일을 살펴보십시오.

@stevenvachon 귀하의 의견에 감사드립니다. 귀하의 HTML 파서 링크를 귀하의 의견과 함께 넣으면 더 좋을 것 같습니다.

대부분의 프로덕션 애플리케이션의 경우 파서 및 문자열 템플릿을 사용하고 싶지 않을 것입니다. 사전 컴파일을 살펴보십시오. 템플릿을 HTML에 직접 사용하는 경우 몇 가지 알려진 문제가 있습니다. 예를 들어 #each 블록 도우미는 HTML 파서의 작동 방식 으로 인해 테이블 ​​내에서 작동하지 않습니다

아마도

1. <script> -tag 예시 바로 아래

템플릿을 <script> -tag 안에 넣는 것이 중요합니다. HTML에 직접 넣지 마십시오. 그렇지 않으면 HTML 파서가 수정할 수 있습니다(예 : 테이블이 포함된 경우 ).

1. 사전 컴파일에 대한 글머리 기호를 로 변경합니다.

이 접근 방식은 프로덕션 애플리케이션에 권장되지 않습니다. 템플릿을 미리 컴파일하는 것도 가능합니다. [...]

사실 저는 개인적으로 더 이상 브라우저에서 Handlebars를 사용하지 않을 것입니다. 다른 많은 프레임워크가 있습니다(Angular 및 React뿐만 아니라 Vue 및 Ractive). 이 비디오 는 꽤 멋지고 문제를 보여줍니다 ...

저는 핸들바를 서버와 정적 페이지 생성기로 사용하지만 브라우저 렌더링의 경우 더 나은 방법이 있다고 생각합니다.

@nknapp 나는 쓰기 시작 핸들-HTML 파서를 VDOMs을 통해 브라우저로 가져에 사용하지만, 저항을 만났다 .

@nknapp 답변 감사합니다. 귀하의 의견은 다음과 같습니다.

1. 템플릿을 내부에 넣는 것의 중요성

@profullstack 저는 이 프로젝트의 관리자가 아닙니다.

변경했습니다.

@nknapp 감사합니다. 많은 분들이 여러분의 변화로 혜택을 받을 거라 믿습니다.

나는 이 문제가 꽤 오래되었다는 것을 알고 있지만 최근에 Sendgrid의 이메일 템플릿 편집기가 이러한 모범 사례를 따르지 않아 이 문제에 직면했습니다. 이러한 이유로 Google에서 다른 사람이 이 문제를 해결하는 경우 해결 방법은 HTML 주석에 핸들바 코드를 배치하는 것입니다.

<table >
  <tbody>
    <!-- {{#each items}} -->
    <tr>
      <td>{{this.key}}</td>
      <td>{{this.value}}</td>
    </tr>
    <!-- {{/each}} -->
  </tbody>
</table>

다음 출력을 생성합니다.

<table>
  <tbody>
    <!--  -->
    <tr>
      <td>my key</td>
      <td>my value</td>
    </tr>
    <!--  -->
    <!--  -->
    <tr>
      <td>my key 2</td>
      <td>my value 2</td>
    </tr>
    <!--  -->
  </tbody>
<table>

(참고: Sendgrid의 템플릿 편집기에서만 직접 핸들바를 사용하여 이를 확인하지 않았습니다.)

@gurpreetatwal 팁 감사합니다. SendGrid에 대한 간단한 정보로 오늘 저녁 디버깅 시간을 절약했습니다!

@gurpreetatwal 근데 왜?

@Lazarencjusz 수정이 작동하는 이유 또는 SendGrid 이메일 템플릿 편집기가 올바르게 작동하지 않는 이유는 무엇입니까?

안녕하세요! 테이블 대신 div 요소를 사용하면 작동합니다.
또한 모든 테이블 요소를 div에 다시 작성합니다.

@gurpreetatwal 의 솔루션은 핸들바용 Mailchimp/Mandrills 템플릿에서 저에게 효과적입니다. 많은 수고를 덜어주셔서 감사합니다!