1

現在、以下のようにクライアントjavascriptでdustjsを実行しました

<!DOCTYPE html>
<html>
<head>
  <script src="lib/dust-full-0.3.0.min.js" type="text/javascript"></script>
  <script src="vendor/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(document).ready(function(){

  // JSON response from server 
  var json_object = { "profile_skill": "Profile Skill",
      "skills": [
            { "name": "JavaScript"  },
            { "name": "Ruby" },
            { "name": "Java" }
      ]
    }
  // render method

    dustRender = function(){
      // Get the dust html template to dust compile
      var dust_tag = $('#page').html() ; 

      var compiled = dust.compile(dust_tag, "tmp_skill");
      //load templates
      dust.loadSource(compiled);
      //Renders the named template and calls callback on completion. context may be a plain object or an instance of dust.Context.
      dust.render("tmp_skill", json_object, function(err, html_out) {
      //HTML output
         $('#page').html(html_out);
          console.log(html_out);
      });
    }();


  });

</script>

</head>
<body>
<h1>Dust templates in the browser</h1>
<div id="page">

{profile_skill}
  <ul> {#skills} 
      <li> {name} </li> 
      {/skills}
  </ul>
</div>


</body>
</html>

しかし、私のページ ビュー ソースでは、html タグ出力の代わりに上記のコードを確認できます。また、dustjs を php コードに統合する方法も知りたいです。

4

2 に答える 2

2

テンプレートを php 内に配置しないでください。適切に行い、テンプレートを文字列または別の html ファイルとして定義します。

var templateName = "myTemplate";
var model = { "profile_skill": "Profile Skill",
    "skills": [
        { "name": "JavaScript"  },
        { "name": "Ruby" },
        { "name": "Java" }
    ]
};



dust.onLoad = function(templateName, callback) {
    // this will load a template with [name].html in the folder templates
    // callback is an internal dust.js function
    $.get(["templates/", ".html"].join(templateName), function(data) {
        callback(undefined, data);
    }, "html"); 
};


// dust just takes the template name as first parameter
// if no template of this name is defined it will attempt to load
// and compile it if needed
// override dust's onLoad function to implement your loading

dust.render(templateName, model, function(err, out){
    $('#page').html(out);
});

私のtemplate.htmlの中

{profile_skill}
<ul> {#skills} 
    <li> {name} </li> 
    {/skills}
</ul>

もちろん、重要なのは、テンプレートをコンパイルすると常に配信とレンダリングが高速化されるということです。ただし、ページの残りの部分と一緒にテンプレートを配信するため、loadSourceandを呼び出すcompile必要はありません。代わりに、Dust は、そうするように指示された場合、temploate をすべて単独でロードしようとします。

ドキュメントから：

読み込み中

(...)

デフォルトでは、指定されたテンプレートがキャッシュ内に見つからない場合、Dust は「テンプレートが見つかりません」というエラーを返します。onLoad をオーバーライドして、フォールバック ロード メカニズムを指定します (たとえば、ファイル システムまたはデータベースからテンプレートをロードする)。

内部的にダストは、必要に応じてloadSourceandcompileメソッド自体を呼び出します。上記の例では、オーバーライドする可能性のあるソリューションを含めましたdust.onLoad。もちろん、そこに DOM ノードの html コンテンツを単純に返すこともできます。

dust.onLoad = function(templateName, callback) {
    callback(undefined, $("skill template").hmtml());
}

最後の質問に答えるには：

また、dustjs を php コードに統合する方法も知りたいです。

できません。テンプレートをクライアントに送信してそこでレンダリングするか、バックエンドに JavaScript インタープリターを使用してテンプレートをレンダリングしない限り、それを使用することはできません。

于 2012-08-10T22:23:16.427 に答える
0

Torsten Walter が述べたように、ブラウザーでコンパイル/レンダリングしている場合、ページに html ソースが表示されません。サーバー側でコンパイルとレンダリングを行う場合、html ソースには最終的な HTML コードが含まれます。これを実現するには、Linkedin ブログで説明されているように、nodejs または Rhino サーバーを使用できます: http://engineering.linkedin.com/frontend/leaving-jsps-dust-moving-linkedin-dustjs-client-side-templates

これは、PHP を使用してダスト テンプレートをコンパイルするのに役立つ場合があります。

https://github.com/saravmajestic/myphp/tree/master/dustcompiler

このユーティリティは、ページにレンダリングする前にダスト テンプレートをコンパイルするためだけのものです。これにより、ブラウザーでのコンパイル時間を回避できます。コンパイルされたテンプレートを JS ファイルとしてページにロードできます。これは、他の JS ファイル/テンプレートと一緒に縮小/集約できます。

お役に立てれば！！！

于 2012-08-14T01:12:36.360 に答える