Rendre la variable facultative dans le modèle underscore.js

Question

J'ai ce code:

_.templateSettings = {interpolate : /\{\{(.+?)\}\}/g};

var _d = _.template($('#_d').html());

$.get('/foo', function(data) {
    $('#output').html(_d(data));
});

et en HTML:

<div id="_d">
    {{name}} {{phone}}
</div>
<div id="output"></div>

/foo retourne quelque chose comme {"name":"joe","phone":"12345"}, mais parfois il n'a pas phone donc retourne simplement {"name":"joe"}, ce qui étouffera l'évaluation du modèle ainsi rien n'est imprimé dans output.Comment rendre une variable facultative?

MODIFIER: /foo est hors de mon contrôle

Answer 1

L'opérateur || est utile pour ce genre de choses:

$.get('/foo', function(data) {
    data.phone = data.phone || "";
    $('#output').html(_d(data));
});

Mais comme vous utilisez déjà Underscore, vous pouvez utiliser la fonction _.defaults .Cette approche est particulièrement utile pour fournir des valeurs par défaut pour plusieurs champs:

$.get('/foo', function(data) {
    _.defaults(data, {name : 'joe', phone : ''});
    $('#output').html(_d(data));
});

Answer 2

J'ai aimé la solution @namuol, une autre chose que nous pourrions faire est de définir le hachage par défaut à l'extension du modèle

var MyModel = Backbone.Model.extend({
    defaults: {
        "foo": "I",
        "bar": "love",
        "yeah": "sara"
    }
});

Juste une autre option.

Answer 3

Vous pouvez avoir un html

<div id="d">
    {{data.name}} {{data.phone}}
</div>

Utilisez le modèle ci-dessous pour éviter les problèmes de variable non définie pour phone

_.templateSettings = {
  interpolate : /\{\{(.+?)\}\}/g
};

var template = _.template($('#d').html());
var jsonResponse = {"name":"Jeo"}; // phone is missing
var result = template({"data":jsonResponse});

Answer 4

Une solution pratique serait d'inclure phone dans l'objet, mais avec une valeur vide:

{"name":"joe","phone":""}

Answer 5

Il y a quelques bonnes réponses ci-dessus, mais vous pouvez utiliser _.partial pour obtenir une seule fonction qui applique un modèleavec les valeurs par défaut:

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"

Answer 6

Et puis il y a l'évidence: mettez ceci en haut de votre modèle:

<%
  if (typeof(phone) === "undefined") {
    phone = "";
  }
%>

Extrait de travail:

$(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>

(également sous le nom de jsfiddle )