pure.js로 새 HTML을 삽입 할 수 있습니까?

JSON 파일에서 시작하여 HTML 템플릿을 렌더링하는 무언가를 찾고 있습니다.pure.js로 새 HTML을 삽입 할 수 있습니까?

문제는 내가 찾고있는 플러그인/프레임 워크/라이브러리는 매우 단순한 것부터 시작하여 <html> 템플릿 구조를 만들어야한다는 것입니다.

<ul> 
    <li><li> 
</ul>

이 같은 JSON : 예를 들어

이 나는 간단한 같은 HTML이

{ 
    "mylist":{ 
     "listone": 
      {"img" : "/img/pippo.gif" , 
      "text1" : "pluto", 
      "text2" : "topolino", 
      "link" : "http://www.sito.it"   
      }, 
     "listtwo": 
      {"img" : "/img/pippo.gif" , 
      "text1" : "pluto", 
      "text2" : "topolino", 
      "link" : "http://www.sito.it"   
      } 
    } 
}

을 나는 같이 내 문서에 렌더링 할 데이터를 원하는 :

을

<ul> 
    <li> 
    <img src="/img/pippo.gif" /> 
    <h1>pluto</h1> 
    <p><a href="http:://www.sito.it>topolino</a></p> 
    </li> 
</ul>

내가 이미 전체 구조체를 사용하고 있다면 평소처럼 pure.js을 사용할 수 있지만, li의 내부 태그를 사용하는 경우 pure.js 지시어로 HTML 코드를 삽입 할 수 있습니까? JsRender 또는 그 유사 물로만 가능합니까?

출처

2012-11-28 Simona Adriani

Pure JS에서는 directives과 함께 JavaScript 기능을 사용할 수 있습니다. 이 함수에서 반환되는 것은 무엇이든, 지시어의 값으로 사용됩니다.

컨텍스트 : 현재 :이 변환
항목 * 위해 전달 된 전체 JSON이다

함수의 인수는 다음 특성을 갖는 목적은 루프 항목
항목 * : 루프의 모든 항목
pos * : 루프의 현재 위치입니다. 배열이 반복되는 경우 정수는 속성 이름은 다음 예는 그것을 수행하는 방법을 보여줍니다 모음

에 반복.

var data = { 
    "img": "/img/pippo.gif", 
    "text1": "pluto", 
    "text2": "topolino", 
    "link": "http://www.sito.it" 
} 

var directive = { 
    'li': function (arg) { 
    return "<img src=\""+arg.context.img+"\" /><h1>" 
     +arg.context.text1+"</h1><p><a href=\"" 
     +arg.context.link+"\">"+arg.context.text2+"</a></p>" 
    } 
} 

$('ul').render(data, directive);

주어진 HTML :

<ul><li></li></ul>

이 (렌더링 후) 하나를 다음과 같이 될 것이다 :

<ul> 
    <li> 
    <img src="/img/pippo.gif"> 
    <h1>pluto</h1> 
    <p> 
     <a href="http://www.sito.it">topolino</a> 
    </p> 
    </li> 
</ul>

그게 도움이되기를 바랍니다.

출처

2013-01-18 13:24:41 Tom

내가 찾고 있었던 것은 꽤 귀여웠다! 그러나 나는 너무 늦게 그것을 읽었다 :-( –

물론 가능합니다. 'javascript DOM createElement'를 검색하면 많은 것을 볼 수 있습니다 (stackoverflow 전체를 포함하여).

출처

2012-12-07 14:59:13

답변보다 도움이됩니다. 나는 당신이 성취하고자하는 것에 대해 추천 할 것입니다. 템플리트에 사용되는 강력한 개념은 HTML과 코드를 분리하는 것입니다.이 분리를 유지하면 코드를 작성하는 방법을 이해하고 이러한 구분을 따르는 코드를 이해할 수 있습니다. 그러면 코드는 당신뿐 아니라 동일한 원리를 따르는 다른 사람들에 의해 작성되고 이해되기가 더 쉬울 것입니다. 당신의 예에서

당신의 HTML 템플릿은 다음과 같이해야합니다 :

<ul> 
    <li> 
    <img src="/img/pappo.gif" /> 
    <h1>marte</h1> 
    <p><a href="http:://www.sito.it>guille</a></p> 
    </li> 
</ul>

이 같은 JSON :

{ 
    "mylist":{ 
     "listone": 
      {"img" : "/img/pippo1.gif" , 
      "text1" : "pluto1", 
      "text2" : "topolino1", 
      "link" : "http://www.sito1.it"  
      }, 
     "listtwo": 
      {"img" : "/img/pippo2.gif" , 
      "text1" : "pluto2", 
      "text2" : "topolino2", 
      "link" : "http://www.sito2.it"  
      } 
    } 
}

최종는 다음과 같아야합니다

<ul> 
    <li> 
    <img src="/img/pippo1.gif" /> 
    <h1>pluto1</h1> 
    <p><a href="http:://www.sito1.it>topolino1</a></p> 
    </li> 
    <li> 
    <img src="/img/pippo2.gif" /> 
    <h1>pluto2</h1> 
    <p><a href="http:://www.sito2.it>topolino2</a></p> 
    </li> 
</ul>

을 이 작업을 수행하는 방법을 설명 할 수있는 가장 쉬운 방법은 JSON 데이터 구조가 HTML을 거의 따르도록 만드는 것입니다. 하나에. 가장 큰 차이점은 일단 템플릿을 작성하면 템플릿을 작성하기가 쉽고 JSON 변환을 프로그래밍하는 것이 결국 HTML 변환을 작성하는 것보다 쉽다는 것입니다. 또한 HTML 템플릿은 브라우저에서 100 % 렌더링 가능하고 프로그래머가 아닌 사용자는 100 % 수정할 수 있습니다. 여기서 핵심은 최종 제품이 HTML이지만 JSON 객체 경로를 사용하면 더 나은 코드가 생성된다는 것입니다. JSON을 생성하는 실제 문제는 제거되지 않으며이를 수행하기위한 도구를 조정하고 배우고 찾을 필요가 있습니다.

출처

2013-02-05 17:23:44

pure.js로 새 HTML을 삽입 할 수 있습니까?

답변

관련 문제