underscore.jsテンプレートで変数をオプションにする
-
28-10-2019 - |
質問
私はこのコードを持っています:
_.templateSettings = {interpolate : /\{\{(.+?)\}\}/g};
var _d = _.template($('#_d').html());
$.get('/foo', function(data) {
$('#output').html(_d(data));
});
そしてHTMLで:
<div id="_d">
{{name}} {{phone}}
</div>
<div id="output"></div>
/foo
のようなものを返します {"name":"joe","phone":"12345"}
, 、しかし、時には持っていません phone
したがって、単に戻ります {"name":"joe"}
, 、テンプレートの評価を窒息させるため、何も印刷されません output
. 。変数をオプションにするにはどうすればよいですか?
編集: /foo
私のコントロールを超えています
解決
||
オペレーターはこの種のものに役立ちます:
$.get('/foo', function(data) {
data.phone = data.phone || "";
$('#output').html(_d(data));
});
しかし、あなたはすでにアンダースコアを使用しているので、あなたは _.defaults
関数。このアプローチは、複数のフィールドにデフォルトを提供するのに特に役立ちます。
$.get('/foo', function(data) {
_.defaults(data, {name : 'joe', phone : ''});
$('#output').html(_d(data));
});
他のヒント
私は@namuolソリューションが好きでした、私たちができるもう1つのことは、モデルでデフォルトハッシュを設定することです
var MyModel = Backbone.Model.extend({
defaults: {
"foo": "I",
"bar": "love",
"yeah": "sara"
}
});
ちょうど別のオプション。
HTMLを使用できます
<div id="d">
{{data.name}} {{data.phone}}
</div>
以下のようにテンプレートを使用して、未定義の変数の問題を避けます phone
_.templateSettings = {
interpolate : /\{\{(.+?)\}\}/g
};
var template = _.template($('#d').html());
var jsonResponse = {"name":"Jeo"}; // phone is missing
var result = template({"data":jsonResponse});
実用的な解決策は、含めることです phone
オブジェクトでは、空の値があります:
{"name":"joe","phone":""}
上にいくつかの良い答えがありますが、あなたは使用できます _.partial
デフォルトでテンプレートを適用する単一の関数を取得するには:
foobarTemplate = _.template('<%=foo%><%=bar%>')
barPrefilled = _.partial(_.defaults, _, {bar:'def'})
foobarTemplate(barPrefilled({foo:'abc'}))
// "abcdef"
foobarTemplateWithDefaults = function (data) {return foobarTemplate(barPrefilled(data));}
foobarTemplateWithDefaults({foo:'wat'})
// "watdef"
foobarTemplateWithDefaults({foo:'foo', bar:'bar'})
// "foobar"
そして、明らかなことがあります。これをテンプレートの上部に入れてください。
<%
if (typeof(phone) === "undefined") {
phone = "";
}
%>
ワーキングスニペット:
$(function() {
$('#result').html(
_.template(
$('#template').html(), {
interpolate: /\{\{(.+?)\}\}/g
}
)({
foo: 23,
// No value for bar
// bar: 11,
},)
)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="x-template" id="template">
<%
if (typeof(bar) === "undefined") {
bar = "default";
}
%>
This is {{ foo }} and {{ bar }}
</script>
<div id="result"></div>
(ASも jsfiddle)
所属していません StackOverflow