Gabarit conditionel

Association et insertion de contenu JSON tout en suivant un gabarit conditionel.

La liste suivante est un exemple d'association conditionnel en devinant le type de données.

Code source de l'example précédent

Json:

{
	"subject": [
		{
			"foo": "bar",
			"bar": "hello world"
		},
		{
			"foo": "https://example.com",
			"bar": "hello world"
		}
	]
}

Html:

<ul data-wb-json='{
	"url": "demo/conditional-1.json#/subject",
	"mapping": [
		{
			"template": "[data-text]",
			"test": "fn:guessType",
			"expect": "xsd:string",
			"assess": "/foo",
			"mapping": [
				{ "selector": "[data-foo]", "value": "/foo" },
				{ "selector": "[data-bar]", "value": "/bar" }
			]
		},
		{
			"template": "[data-link]",
			"test": "fn:guessType",
			"expect": "xsd:anyURI",
			"assess": "/foo",
			"mapping": [
				{ "selector": "a", "value": "/foo", "attr": "href" },
				{ "selector": "a", "value": "/bar" }
			]
		}
	]
}'>
	<template data-text>
		<li><span data-foo></span> - <span data-bar></span></li>
	</template>
	<template data-link>
		<li><a href></a></li>
	</template>
</ul>

À travers des exemples suivants, il montre également l'utilisation de ces configurations, sans s'y limiter. Une liste complète de toutes les configurations est disponible dans la documentation du plugin data-json.

Configuration streamline
(Booléen: vrai ou faux) Cet indicateur indique que le plugin data-json appliquera le gabarit via l'objet d'association directement, sans essayer d'itérer la source de données.
Object d'association assess
(Pointeur JSON) C'est la valeur qui sera prise pour effectuer l'évaluation conditionnelle. Alternativement, elle prendra la valeur de la propriété value. Une autre différence est que assess ne sera pas itéré par rapport à value qui lui sera itéré pour la correspondance interne.

Note : Le gabarit conditionnel considérera les données associées à la propriété @value comme la valeur de son parent correspondant. Quelques exemples utilise cette fonctionnalité d'association automatique, ce qui facilite l'interopérabilité avec des objets typés tels que définis dans la norme JSON-LD.

Code source des fichiers JSON utilisé par les examples dans cette page-ci

Fichier: conditional-1.json

{
	"subject": [
		{
			"foo": "bar",
			"bar": "hello world"
		},
		{
			"foo": "https://example.com",
			"bar": "hello world"
		}
	],
	"list": [
		{
			"@type": "xsd:string",
			"@value": "string"
		},
		{
			"@type": "xsd:double",
			"@value": 123.45
		},
		{
			"@type": "xsd:boolean",
			"@value": true
		},
		{
			"@type": "xsd:anyURI",
			"@value": "https://example.com"
		},
		{
			"@type": "xsd:string",
			"@value": "second string"
		}
	],
	"text": {
		"alpha": "alpha",
		"beta": "beta",
		"gamma": "gamma",
		"delta": "delta"
	}
}

Fichier: conditional-2.json

{
	"alpha": [ "alpha" ],
	"beta": "beta",
	"gamma": { "@value": "gamma" },
	"delta": { "@type": "rdfs:Resource", "@value": "delta" },
	"epsilon": "epsilon",
	"zeta": true,
	"eta": "http://example.com",
	"theta": 123.45,
	"iota": {
		"@type": [ "rdfs:Resource", "xsd:string" ],
		"@value": "iota"
	},
	"kappa": {
		"lamdba": "mu"
	},
	"nu": {
		"@type": "@json",
		"@value": {
			"xi": "xi",
			"omicron": "omicron",
			"pi": "pi"
		}
	},
	"rho": {
		"@type": "@json",
		"@value": {
			"sigma": "sigma",
			"tau": "tau",
			"upsilon": "upsilon"
		}
	},
	"sigma": {
		"alpha": "sigma",
		"gamma": "sigma"
	},
	"undefined": "tau",

	"text": {
		"zeta": "zeta",
		"eta": "eta",
		"theta": "theta",
		"kappa": "kappa"
	}
}

Fonctions de test qui extraient une valeur testable.

Ces tests nécessitent un pointeur de données fourni soit avec la propriété value, qui itérera également, soit avec assess qui n'itérera pas.

fn:isArray
Retourne un booléen indiquant si la valeur testée est un tableau ou non.
fn:isLiteral
Retourne un booléen indiquant si la valeur testée est littérale ou non. Une valeur littérale est considérée comme définie et non comme un objet.
fn:getType
Renvoie le type de la valeur définie via la propriété @type ou son type JavaScript correspondant à l'aide de la fonction typeof.
fn:guessType

Le parseur de gabarits essaiera de deviner le type de données de la valeur testée.

Cette fonction de test renverra :

  • rdfs:Container lorsque la valeur est un tableau.
  • rdfs:Literal pour toute valeur qui est littérale. Une valeur littérale est considérée comme définie et non comme un objet.
  • rdfs:Resource lorsque la valeur est un objet JSON sans type de définie.
  • xsd:anyURI lorsque la valeur est une chaîne de caractères qui commence par une lettre et un chiffre immédiatement suivis de deux points ":" sans espaces, comme https://example.com.
  • xsd:string lorsque la valeur est une chaîne de caractères qui ne semble pas être une URI.
  • xsd:boolean lorsque la valeur est un booléen avec la valeur true ou false.
  • xsd:double lorsque la valeur est un nombre JSON.
  • La valeur définie via la sous-propriété @type.
  • undefined lorsque la valeur est indéfinie.
fn:getValue
Renvoie la valeur en tant que valeur testable.

Exemple de chaque fonction de test :

Démo de chaque fonction de test.

Résultat attendu de la démonstration précédente.

  • fn:isArray: alpha
  • fn:isLiteral: beta
  • fn:isLiteral: gamma
  • fn:getType: delta
  • fn:getType: epsilon
  • fn:getType: zeta
  • fn:guessType: alpha
  • fn:guessType: beta
  • fn:guessType: gamma
  • fn:guessType: eta
  • fn:guessType: beta
  • fn:guessType: gamma
  • fn:guessType: zeta
  • fn:guessType: theta
  • fn:guessType: delta
  • fn:guessType: sigma
  • fn:guessType: tau
  • fn:getValue: kappa
Code source 
<div class="row">
	<div class="col-md-6">
		<p>Démo de chaque fonction de test.</p>
		<ul data-wb-json='{
			"url": "demo/conditional-2.json",
			"streamline": true,
			"mapping": [
				{
					"template": "[data-isarray]",
					"test": "fn:isArray",
					"assess": "/alpha",
					"mapping": [
						{ "selector": "span", "value": "/alpha/0" }
					]
				},
				{
					"template": "[data-isliteral]",
					"test": "fn:isLiteral",
					"assess": "/beta",
					"mapping": [
						{ "selector": "span", "value": "/beta" }
					]
				},
				{
					"template": "[data-isliteral]",
					"test": "fn:isLiteral",
					"assess": "/gamma",
					"mapping": [
						{ "selector": "span", "value": "/gamma" }
					]
				},
				{
					"template": "[data-gettype]",
					"test": "fn:getType",
					"assess": "/delta",
					"expect": "rdfs:Resource",
					"mapping": [
						{ "selector": "span", "value": "/delta" }
					]
				},
				{
					"template": "[data-gettype]",
					"test": "fn:getType",
					"assess": "/epsilon",
					"expect": "string",
					"mapping": [
						{ "selector": "span", "value": "/epsilon" }
					]
				},
				{
					"template": "[data-gettype]",
					"test": "fn:getType",
					"assess": "/zeta",
					"expect": "boolean",
					"mapping": [
						{ "selector": "span", "value": "/text/zeta" }
					]
				},
				{
					"template": "[data-guesstype]",
					"test": "fn:guessType",
					"assess": "/alpha",
					"expect": "rdfs:Container",
					"mapping": [
						{ "selector": "span", "value": "/alpha/0" }
					]
				},
				{
					"template": "[data-guesstype]",
					"test": "fn:guessType",
					"assess": "/beta",
					"expect": "rdfs:Literal",
					"mapping": [
						{ "selector": "span", "value": "/beta" }
					]
				},
				{
					"template": "[data-guesstype]",
					"test": "fn:guessType",
					"assess": "/gamma",
					"expect": "rdfs:Literal",
					"mapping": [
						{ "selector": "span", "value": "/gamma" }
					]
				},
				{
					"template": "[data-guesstype]",
					"test": "fn:guessType",
					"assess": "/beta",
					"expect": "xsd:anyURI",
					"mapping": [
						{ "selector": "span", "value": "/beta" }
					]
				},
				{
					"template": "[data-guesstype]",
					"test": "fn:guessType",
					"assess": "/gamma",
					"expect": "xsd:anyURI",
					"mapping": [
						{ "selector": "span", "value": "/gamma" }
					]
				},
				{
					"template": "[data-guesstype]",
					"test": "fn:guessType",
					"assess": "/eta",
					"expect": "xsd:anyURI",
					"mapping": [
						{ "selector": "span", "value": "/text/eta" }
					]
				},
				{
					"template": "[data-guesstype]",
					"test": "fn:guessType",
					"assess": "/beta",
					"expect": "xsd:string",
					"mapping": [
						{ "selector": "span", "value": "/beta" }
					]
				},
				{
					"template": "[data-guesstype]",
					"test": "fn:guessType",
					"assess": "/gamma",
					"expect": "xsd:string",
					"mapping": [
						{ "selector": "span", "value": "/gamma" }
					]
				},
				{
					"template": "[data-guesstype]",
					"test": "fn:guessType",
					"assess": "/eta",
					"expect": "xsd:string",
					"mapping": [
						{ "selector": "span", "value": "/text/eta" }
					]
				},
				{
					"template": "[data-guesstype]",
					"test": "fn:guessType",
					"assess": "/zeta",
					"expect": "xsd:boolean",
					"mapping": [
						{ "selector": "span", "value": "/text/zeta" }
					]
				},
				{
					"template": "[data-guesstype]",
					"test": "fn:guessType",
					"assess": "/theta",
					"expect": "xsd:double",
					"mapping": [
						{ "selector": "span", "value": "/text/theta" }
					]
				},
				{
					"template": "[data-guesstype]",
					"test": "fn:guessType",
					"assess": "/delta",
					"expect": "rdfs:Resource",
					"mapping": [
						{ "selector": "span", "value": "/delta/@value" }
					]
				},
				{
					"template": "[data-guesstype]",
					"test": "fn:guessType",
					"assess": "/sigma",
					"expect": "rdfs:Resource",
					"mapping": [
						{ "selector": "span", "value": "/sigma/alpha" }
					]
				},
				{
					"template": "[data-guesstype]",
					"test": "fn:guessType",
					"assess": "/tau",
					"expect": "undefined",
					"mapping": [
						{ "selector": "span", "value": "/undefined" }
					]
				},
				{
					"template": "[data-getvalue]",
					"test": "fn:getValue",
					"assess": "/kappa",
					"operand": "eq",
					"expect": { "lamdba": "mu" },
					"mapping": [
						{ "selector": "span", "value": "/text/kappa" }
					]
				}
			]
		}'>
			<template data-isarray>
				<li><code>fn:isArray</code>: <span></span></li>
			</template>
			<template data-isliteral>
				<li><code>fn:isLiteral</code>: <span></span></li>
			</template>
			<template data-gettype>
				<li><code>fn:getType</code>: <span></span></li>
			</template>
			<template data-guesstype>
				<li><code>fn:guessType</code>: <span></span></li>
			</template>
			<template data-getvalue>
				<li><code>fn:getValue</code>: <span></span></li>
			</template>
		</ul>
	</div>
	<div class="col-md-6">
		<p>Résultat attendu de la démonstration précédente.</p>
		<ul>
			<li><code>fn:isArray</code>: alpha</li>
			<li><code>fn:isLiteral</code>: beta</li>
			<li><code>fn:isLiteral</code>: gamma</li>
			<li><code>fn:getType</code>: delta</li>
			<li><code>fn:getType</code>: epsilon</li>
			<li><code>fn:getType</code>: zeta</li>
			<li><code>fn:guessType</code>: alpha</li>
			<li><code>fn:guessType</code>: beta</li>
			<li><code>fn:guessType</code>: gamma</li>
			<li><code>fn:guessType</code>: eta</li>
			<li><code>fn:guessType</code>: beta</li>
			<li><code>fn:guessType</code>: gamma</li>
			<li><code>fn:guessType</code>: zeta</li>
			<li><code>fn:guessType</code>: theta</li>
			<li><code>fn:guessType</code>: delta</li>
			<li><code>fn:guessType</code>: sigma</li>
			<li><code>fn:guessType</code>: tau</li>
			<li><code>fn:getValue</code>: kappa</li>
		</ul>
	</div>
</div>

Fonction d'opérande

Fonctions d'opérande qui vérifient la valeur testable.

softEq (défaut)
Vérifie si la valeur est équivalente à l'attente, optionellement un tableau. Lorsqu'aucune attente n'est spécifiée, il retournera true si la valeur testable existe.
eq
Vérifie si la valeur est égale à l'attente, y compris lorsque la valeur est un objet.
neq
Vérifie si la valeur n'est pas égale à l'attente, y compris lorsque la valeur est un objet.
in
Check if the value (or array of value) is in the expectation (or array of expectation)
Vérifie si la valeur (ou un tableau de valeurs) se trouve dans l'attente (ou un tableau d'attentes).
nin
Vérifie si la valeur (ou un tableau de valeurs) se ne trouve pas dans l'attente (ou un tableau d'attentes).

Exemple d'opérande

Démonstration de chaque opérande.

Résultat attendu de la démonstration précédente.

  • eq: delta
  • eq: kappa
  • eq: iota
  • neq: delta
  • in: iota
  • nin: iota
Code source 
<div class="row">
	<div class="col-md-6">
		<p>Démonstration de chaque opérande.</p>
		<ul data-wb-json='{
			"url": "demo/conditional-2.json",
			"streamline": true,
			"mapping": [
				{
					"template": "[data-eq]",
					"test": "fn:guessType",
					"assess": "/delta",
					"operand": "eq",
					"expect": "rdfs:Resource",
					"mapping": [
						{ "selector": "span", "value": "/delta/@value" }
					]
				},
				{
					"template": "[data-eq]",
					"test": "fn:getValue",
					"assess": "/kappa",
					"operand": "eq",
					"expect":  { "lamdba": "mu" },
					"mapping": [
						{ "selector": "span", "value": "/text/kappa" }
					]
				},
				{
					"template": "[data-eq]",
					"test": "fn:guessType",
					"assess": "/iota",
					"operand": "eq",
					"expect": [ "rdfs:Resource", "xsd:string" ],
					"mapping": [
						{ "selector": "span", "value": "/iota/@value" }
					]
				},
				{
					"template": "[data-neq]",
					"test": "fn:guessType",
					"assess": "/delta",
					"operand": "neq",
					"expect": "rdfs:Literal",
					"mapping": [
						{ "selector": "span", "value": "/delta/@value" }
					]
				},
				{
					"template": "[data-in]",
					"test": "fn:guessType",
					"assess": "/iota",
					"operand": "in",
					"expect": "xsd:string",
					"mapping": [
						{ "selector": "span", "value": "/iota/@value" }
					]
				},
				{
					"template": "[data-nin]",
					"test": "fn:guessType",
					"assess": "/iota",
					"operand": "nin",
					"expect": "rdfs:Literal",
					"mapping": [
						{ "selector": "span", "value": "/iota/@value" }
					]
				}

			]
		}'>
			<template data-eq>
				<li><code>eq</code>: <span></span></li>
			</template>
			<template data-neq>
				<li><code>neq</code>: <span></span></li>
			</template>
			<template data-in>
				<li><code>in</code>: <span></span></li>
			</template>
			<template data-nin>
				<li><code>nin</code>: <span></span></li>
			</template>
		</ul>
	</div>
	<div class="col-md-6">
		<p>Résultat attendu de la démonstration précédente.</p>
		<ul>
			<li><code>eq</code>: delta</li>
			<li><code>eq</code>: kappa</li>
			<li><code>eq</code>: iota</li>
			<li><code>neq</code>: delta</li>
			<li><code>in</code>: iota</li>
			<li><code>nin</code>: iota</li>
		</ul>
	</div>
</div>

La fonction d'association : Alternative

Cette fonction d'association spéciale permet de configurer une liste d'associations où seul le premier enfant satisfaisant à la condition de test sera exécuté.

Démonstration de la fonction alternative.

Résultat attendu de la démonstration précédente.

  • Premier gabarit: gamma
Code source 
<div class="row">
	<div class="col-md-6">
		<p>Démonstration de la fonction alternative.</p>
		<ul data-wb-json='{
			"url": "demo/conditional-2.json",
			"streamline": true,
			"mapping": [
				{
					"@type": "rdf:Alt",
					"mapping": [
						{
							"template": "[data-first]",
							"test": "fn:guessType",
							"assess": "/gamma",
							"expect": "rdfs:Literal",
							"mapping": [
								{ "selector": "span", "value": "/gamma" }
							]
						},
						{
							"template": "[data-second]",
							"test": "fn:guessType",
							"assess": "/eta",
							"expect": "xsd:anyURI",
							"mapping": [
								{ "selector": "span", "value": "/eta" }
							]
						}
					]
				}
			]
		}'>
			<template data-first>
				<li>Premier gabarit: <span></span></li>
			</template>
			<template data-second>
				<li>Second gabarit: <span></span></li>
			</template>

		</ul>
	</div>
	<div class="col-md-6">
		<p>Résultat attendu de la démonstration précédente.</p>
		<ul>
			<li>Premier gabarit: gamma</li>
		</ul>
	</div>
</div>

Affichage conditionel du contenu d'un gabarit

Affiche le contenu du gabarit (<template>) sans l'utiliser pour correspondre des données JSON.

Démo:

Résultat attendu de la démonstration précédente.

Fonctionne

Source code 
<div class="row">
	<div class="col-md-6">
		<p>Démo:</p>
		<div data-wb-json='{
				"url": "demo/conditional-2.json",
				"streamline": true,
				"mapping": [
					{
						"template": "[data-show-conditional-only]",
						"test": "fn:isLiteral",
						"assess": "/beta",
						"mapping": null
					}
				]
			}'>
			<template data-show-conditional-only>
				<p>Fonctionne</p>
			</template>
		</div>
	</div>
	<div class="col-md-6">
		<p>Résultat attendu de la démonstration précédente.</p>
		<p>Fonctionne</p>
	</div>
</div>

Emplacement du gabarit fusionné

Par défaut, lorsque la configuration n'est pas rationalisée, le contenu créé avec le gabarit initial est ajouté à l'élément.

For inner template, through mapping configuration, and when the plugin configuration streamline flag is on, the content created with the template are added just before that template. However, you can use the flag "append" to append from the parent element of the template.

Pour le gabarit interne, via la configuration d'association et lorsque l'indicateur de rationalisation de la configuration du plugin est activé, le contenu créé avec le gabarit sera ajouté juste avant ce gabarit. Cependant, vous pouvez utiliser l'indicateur "append" pour ajouter à la fin à partir de l'élément parent du gabarit.

Voici un exemple de rendu d'un modèle spécifié via une association par défaut.

Démonstration (par défault, insertions sur place):

Résultat attendu de la démonstration précédente.

  • xsd:string: string
  • xsd:string: second string
  • xsd:double: 123.45
  • xsd:boolean: true
  • xsd:anyURI: https://example.com

Démonstration (Avec l'indicateur append):

Résultat attendu de la démonstration précédente.

  • xsd:string: string
  • xsd:double: 123.45
  • xsd:boolean: true
  • xsd:anyURI: https://example.com
  • xsd:string: second string
Code source 
<div class="row">
	<div class="col-md-6">
		<p>Démonstration (par défault, insertions sur place):</p>
		<ul data-wb-json='{
			"url": "demo/conditional-1.json#/list",
			"mapping": [
				{
					"template": "[data-string]",
					"test": "fn:guessType",
					"assess": "/",
					"expect": "xsd:string",
					"mapping": [
						{ "selector": "span", "value": "/" }
					]
				},
				{
					"template": "[data-double]",
					"test": "fn:guessType",
					"assess": "/",
					"expect": "xsd:double",
					"mapping": [
						{ "selector": "span", "value": "/" }
					]
				},
				{
					"template": "[data-boolean]",
					"test": "fn:guessType",
					"assess": "/",
					"expect": "xsd:boolean",
					"mapping": [
						{ "selector": "span", "value": "/" }
					]
				},
				{
					"template": "[data-anyuri]",
					"test": "fn:guessType",
					"assess": "/",
					"expect": "xsd:anyURI",
					"mapping": [
						{ "selector": "span", "value": "/" }
					]
				}
			]
		}'>
			<template data-string>
				<li><code>xsd:string</code>: <span></span></li>
			</template>
			<template data-double>
				<li><code>xsd:double</code>: <span></span></li>
			</template>
			<template data-boolean>
				<li><code>xsd:boolean</code>: <span></span></li>
			</template>
			<template data-anyuri>
				<li><code>xsd:anyURI</code>: <span></span></li>
			</template>
		</ul>
	</div>
	<div class="col-md-6">
		<p>Résultat attendu de la démonstration précédente.</p>
		<ul>
			<li><code>xsd:string</code>: string</li>
			<li><code>xsd:string</code>: second string</li>
			<li><code>xsd:double</code>: 123.45</li>
			<li><code>xsd:boolean</code>: true</li>
			<li><code>xsd:anyURI</code>: https://example.com</li>
		</ul>
	</div>
</div>

<div class="row">
	<div class="col-md-6">
		<p>Démonstration (Avec l'indicateur <code>append</code>):</p>
		<ul data-wb-json='{
			"url": "demo/conditional-1.json#/list",
			"mapping": [
				{
					"template": "[data-string]",
					"test": "fn:guessType",
					"assess": "/",
					"expect": "xsd:string",
					"append": true,
					"mapping": [
						{ "selector": "span", "value": "/" }
					]
				},
				{
					"template": "[data-double]",
					"test": "fn:guessType",
					"assess": "/",
					"expect": "xsd:double",
					"append": true,
					"mapping": [
						{ "selector": "span", "value": "/" }
					]
				},
				{
					"template": "[data-boolean]",
					"test": "fn:guessType",
					"assess": "/",
					"expect": "xsd:boolean",
					"append": true,
					"mapping": [
						{ "selector": "span", "value": "/" }
					]
				},
				{
					"template": "[data-anyuri]",
					"test": "fn:guessType",
					"assess": "/",
					"expect": "xsd:anyURI",
					"append": true,
					"mapping": [
						{ "selector": "span", "value": "/" }
					]
				}
			]
		}'>
			<template data-string>
				<li><code>xsd:string</code>: <span></span></li>
			</template>
			<template data-double>
				<li><code>xsd:double</code>: <span></span></li>
			</template>
			<template data-boolean>
				<li><code>xsd:boolean</code>: <span></span></li>
			</template>
			<template data-anyuri>
				<li><code>xsd:anyURI</code>: <span></span></li>
			</template>
		</ul>
	</div>
	<div class="col-md-6">
		<p>Résultat attendu de la démonstration précédente.</p>
		<ul>
			<li><code>xsd:string</code>: string</li>
			<li><code>xsd:double</code>: 123.45</li>
			<li><code>xsd:boolean</code>: true</li>
			<li><code>xsd:anyURI</code>: https://example.com</li>
			<li><code>xsd:string</code>: second string</li>
		</ul>
	</div>
</div>

Association de la valeur du type @json (ou rdf:JSON)

Allow to display in a textual form @json typed value or rdf:JSON value which are the exact same. The test function for data type will always return the RDF form of the type @json which is rdf:JSON

Permet d'afficher sous une forme textuel les valeur du type @json ou de rdf:JSON lequel ont exactement la même signification. La fonction d'essaie du type de donné va toujours retourné ce type sous se forme RDF. Par example, le type @json sera retourné comme valeur rdf:JSON

Démonstration d'association d'une donnée @json et de rdf:JSON

Résultat attendu de la démonstration précédente.

{"xi":"xi","omicron":"omicron","pi":"pi"}
{"sigma":"sigma","tau":"tau","upsilon":"upsilon"}
Code source 
<div class="row">
	<div class="col-md-6">
		<p>Démonstration d'association d'une donnée <code>@json</code> et de <code>rdf:JSON</code></p>
		<div data-wb-json='{
			"url": "demo/conditional-2.json",
			"streamline": true,
			"mapping": [
				{
					"template": "[data-json-content]",
					"test": "fn:guessType",
					"assess": "/nu",
					"expect": "rdf:JSON",
					"mapping": [
						{ "selector": "data", "value": "/nu" },
						{ "selector": "data", "value": "/nu", "attr": "value" }
					]
				},
				{
					"template": "[data-json-content]",
					"test": "fn:guessType",
					"assess": "/rho",
					"expect": "rdf:JSON",
					"mapping": [
						{ "selector": "data", "value": "/rho" },
						{ "selector": "data", "value": "/rho", "attr": "value" }
					]
				}
			]
		}'>
			<template data-json-content>
				<pre><code><data value></data></code></pre>
			</template>
		</div>
	</div>
	<div class="col-md-6">
		<p>Résultat attendu de la démonstration précédente.</p>
		<pre><code><data value='{"xi":"xi","omicron":"omicron","pi":"pi"}'>{"xi":"xi","omicron":"omicron","pi":"pi"}</data></code></pre>
		<pre><code><data value='{"sigma":"sigma","tau":"tau","upsilon":"upsilon"}'>{"sigma":"sigma","tau":"tau","upsilon":"upsilon"}</data></code></pre>
	</div>
</div>

Extension de la fonction de test et de l'opérande

Le plugin data-json a été adapté pour permettre l'extension de sa fonction de test et de sa liste d'opérandes, sans possibilité de les remplacer.

Si la fonction de test personnalisée et l'opérande définis uniquement sur cette page sont positifs, le texte suivant sera mis en évidence avec le contenu défini sur "beta":

Code source 
<script>
window[ "wb-data-json" ] = {
	functionForTest: {
		"myCustomTest": function( value, rawValue ) {
			if ( value === "beta" ) {
				return "foo";
			}
			return value;
		}
	},
	functionForOperand: {
		"myCustomOperand": function( value, expect ) {
			if ( value === "foo" && expect === "bar" ) {
				return true;
			} else {
				return false;
			}
		}
	}
};
</script>

<p data-wb-json='{
	"url": "demo/conditional-2.json",
	"streamline": true,
	"mapping": [
		{
			"template": "[data-custom]",
			"test": "myCustomTest",
			"value": "/beta",
			"operand": "myCustomOperand",
			"expect": "bar",
			"mapping": [
				{ "selector": "strong", "value": "/" }
			]
		}
	]
}'>Si la fonction de test personnalisée et l'opérande définis uniquement sur cette page sont positifs, le texte suivant sera mis en évidence avec le contenu défini sur "beta":
	<template data-custom>
		<strong></strong>
	</template>
</p>
Date de modification :