lodashテンプレートの関数値を返す

debugcn 投稿 Dev

グリーンさん

私はlodashテンプレートを使用してhtmlテンプレートをクライアント側にレンダリングしています。繰り返されている多くのhtmlテンプレートがあります。そこで、別のテンプレートで繰り返しテンプレートを呼び出すことにしました。例えば：

ダミー.html

<%= _.template(templates['button'])({ title: "click me" }) %>

上記のアプローチは機能_.templateしますが、ボタンを何度もレンダリングするように呼び出しているので、以下に示すようにグローバル関数を作成しようと思いました。

dumpary.js

var sb = {
    setButton: function(data){
        data = data || {};
        return _.template(templates['button'])(data);
    },
    /* other functions */
}

次に、次のように呼び出しますdummy.html。

<%= sb.setButton({ title: "click me" }) %>

しかし、これは機能していません。（レンダリングされません）

私がここで間違っていることは何ですか？

編集：

私console.log(this)はsetButton機能しました。Chromeコンソールには何も記録されていませんでした。次に=、lodashテンプレート構文から削除し、sbグローバル変数をログに記録しました。

<% sb.setButton({ title: "click me" }) %>

しかし、それでも上記のものはボタンをレンダリングしていません。

nikoshr

コンパイルされたテンプレートは何であるかを知りませんsb。のようなものでメインテンプレートを呼び出しているとすると_.template(src)()、Lodashはのようなエラーでそれを窒息させますReferenceError: sb is not defined。オプションとしてパーシャルハッシュを渡すと、ボタンが表示されます。

var templates = {
    button: '<button><%= title %></button>'
};
var sb = {
    setButton: function(data){
        data = data || {};
        return _.template(templates['button'])(data);
    }
};

var src = '<%= sb.setButton({ title: "click me" }) %>'
document.getElementById('result').innerHTML = _.template(src)({sb: sb});

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<div id='result'></div>

パーシャルをテンプレートに渡さずに直接利用できるようにしたい場合は、グローバルを_に添付します。たとえば、_.sb次のようにします。

var templates = {
    button: '<button><%= title %></button>'
};
_.sb = {
    setButton: function(data){
        data = data || {};
        return _.template(templates['button'])(data);
    }
};

var src = '<%= _.sb.setButton({ title: "click me" }) %>'
document.getElementById('result').innerHTML = _.template(src)();

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<div id='result'></div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-05-28

コメントを追加

サインイン

分類Dev

Related 関連記事

記事