2

データのJSONファイルから開始してHTMLテンプレートをレンダリングするものを探しています。

問題は、私が探しているプラ​​グイン/フレームワーク/ライブラリは<html>、非常に単純なものから始めて、それ自体でテンプレート構造を作成する必要があるということです。

たとえば、次のような単純なhtmlがあります。

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

そしてこのようなjson：

{
   "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を使用してHTMLコードを挿入できますか？pure.jsそれとも、JsRenderまたは同様のものでのみ可能ですか？

4

3 に答える 3

4

Pure JSを使用すると、JavaScript関数をディレクティブで使用できます。その関数から返されるものはすべて、ディレクティブの値として使用されます。

関数の引数は、次のプロパティを持つオブジェクトです。

  • コンテキスト：これは、変換のために渡された完全なJSONです
  • item *：現在のループアイテム
  • items *：ループのすべてのアイテム
  • 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-18T13:24:41.253 に答える
1

これは答えよりもアドバイスです。私はあなたが成し遂げようとしていることに反対することをお勧めします。テンプレート作成に使用される強力な概念は、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にほぼ1対1で従わせることです。大きな違いは、それが完了すると、テンプレートの作成が容易になり、JSON変換のプログラミングがHTML変換の作成よりも最終的に簡単になることです。さらに、HTMLテンプレートは、ブラウザーで100％レンダリング可能であり、プログラマー以外でも100％変更可能です。ここで重要なのは、最終製品はHTMLですが、JSONオブジェクトルートを使用するとより良いコードが生成されるということです。JSONを作成する際の実際の問題を取り除くことはできません。そのためには、調整、学習、およびツールの検索が必要になります。

于 2013-02-05T17:23:44.477 に答える
0

確かにそれは可能です。'javascript DOM createElement'を検索すると、たくさんの例が見つかります（stackoverflow全体を含む）。

于 2012-12-07T14:59:13.643 に答える