>

이 카드를 페이지에서보고 싶지만 아무 것도 표시되지 않습니다. 내 백엔드로 firebase를 사용하고 있습니다 firebase에서 검색 된 데이터를 테이블에 부풀 리려고 시도했지만 append () 함수로 제대로 작동했지만 cardView를 사용하려고하면 작동하지 않습니다.  이것은 내 코드입니다 :

index.html :

 <div class="mdl-layout__drawer">
   <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
     <a class="mdl-navigation__link" href="">Link</a>
     <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
   </div>
   <main class="mdl-layout__content">
     <div class="page-content"> 
        <!-- Your content goes here -->
                     <div id="comments" class="inline-grid">
                     </div>
      </div>
     </main>

이것은 내 index.js입니다.

var rootRef = firebase.database().ref().child("Stories");
rootRef.on("child_added", snap =>{
var title = snap.child("title").val();
var content = snap.child("content").val();
$("#comments").append(" <div class="mdl-card__title">
<h2 class="mdl-card__title-text">"+ title +"</h2>
 </div>
 <div class="mdl-card__supporting-text">
     "+ content +"
  </div>
   <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-
   effect">
     Get Started
    </a>
   </div>
   <div class="mdl-card__menu">
    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-
     effect">
     <i class="material-icons">share</i>
    </button>
   </div>");
    });

  • 답변 # 1

    당신의 .append() 에서  매개 변수로 전달한 HTML이 유효한 문자열이 아닙니다. 클래스 속성을 지정할 때 문자열을 묶는 데 큰 따옴표를 사용했기 때문에 JavaScript가 문자열의 끝으로 해석하는 큰 따옴표를 사용합니다.

    이것에 대한 하나의 수정은 다음과 같이 백 슬래시를 사용하여 문자열 내에서 큰 따옴표를 이스케이프하는 것입니다.
    와이즈 비즈 .

    또 다른 방법은 문자열을 큰 따옴표 대신 작은 따옴표로 묶는 것입니다. 그러면 다음과 같이 쓸 수 있습니다 :

    "\""
    
    

    문자열을 너무 많은 줄로 나눌 필요는 없지만 HTML을 더 읽기 쉽게하기 위해이 방법을 선호합니다.

    var html = '<div class="mdl-card__title">'+ '<h2 class="mdl-card__title-text">'+ title +'</h2>'+ '</div>'+ '<div class="mdl-card__supporting-text">'+ content +'</div>'+ '<div class="mdl-card__actions mdl-card--border">'+ '<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Get Started</a>'+ '</div>'+ '<div class="mdl-card__menu">'+ '<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">'+ '<i class="material-icons">share</i>'+ '</button>'+ '</div>'; $("#comments").append(html);

  • 이전 C #에서 JSON을 직렬화 해제하고 특정 속성 값을 검색하는 방법
  • 다음 bash - Mac에서 실행할 때 일치하는` " '오류를 찾는 동안 예기치 않은 EOF가 발생했습니다