0

私が基本的に達成しようとしているのは、ソケット接続を介してデータを取得するときに、jadeパーシャル/テンプレートを再利用することです。動作しない例：

socket.on('company_created', function(company) {
  var html = include _company;
  $('#companies ul').append(html);
});

通常、私は新しいものを作成し、liそのようにコンテンツを設定する必要がありました（これは期待どおりに機能しています）：

$('#companies ul').append($('<li>').text(company.name));

これは単純なリストでは問題ありませんが、複雑なリストなどがあると、かなり早く面倒になる可能性があります。さらに、プレーンHTMLを再度作成する必要があったため、既存のjadeテンプレートをすべての長所で再利用することにしました。素晴らしいですが、まだ運がありませんでした。

どんな手掛かり？

PS：Ember、Backbone、Derby、Meteor、Angularなどを使用するように言わないでください。

前もって感謝します！

4

2 に答える 2

1

を使用して、jade ソースを JS にコンパイルできますjade.compile。次に、これらのソースをクライアント側の JavaScript に含め、jade の を含めruntime.min.js、クライアント側コードの通常の JS 関数について jade テンプレートを参照します。

例えば、

サーバー.js

app.get('/templates/:template.js', function (req, res) {
    var template = req.params.template;
    response.end([
        "window.templates = window.templates || {};",
        "window.templates[\"" + template + "\"] = " + jade.compile(template + ".jade", { client: true; });
    ].join("\r\n"));
});

client.js

$(function() { $("#placeholder").html(window.templates["content"]({user: "Daniel" })); });

content.jade

h1: Hello #{user}!

index.jade

!!!
html
    head
        script(src='/lib/jquery/jquery.js')
        script(src='/lib/jade/runtime.min.js')
        script(src='/templates/content.js')
        script(src='/scripts/client.js')
    body
        #placeholder

上記のコードは構文的に正しくない可能性があり、アイデアを説明するためだけに提供されていることに注意してください。

于 2012-08-29T08:01:01.420 に答える
0

それらを penartur のような関数にコンパイルするビルドステップがあります。私は拡張またはインクルードを使用しません (いずれにせよクライアントでは動作しません) が、個人的には、DOM が必要なすべての分離を提供するため、クライアントではその必要がまったくないことがわかりました。

于 2012-08-29T15:22:53.910 に答える