Patching with URL Mapping - v0.1.0

Execute pre-configured patched based on url query string

For the purpose of the following working example there is multiple instance of wb-urlmapping but it they can be all included in one instance. Having all of them in one is the recommend approach.

JSON files source code

data-1.json 
{}
data-2.json 
{
	"city": {
		"gat": "Gatineau",
		"ott": "Ottawa",
		"vdm": "Val-des-monts"
	},
	"fruit": "Perry",
	"country": {
		"name": "Canada",
		"province": {
			"qc": "Québec",
			"on": "Ontario",
			"ma": "Manitoba"
		}
	}
}

Applying patches

Results

My city is: somewhere

My fruit is: all of them

The wait configuration is set to true to prevent the json-manager of updating data-json content after the json file has been downloaded. Instead it will wait to receive additional patches from an another plugin communicated through the patches.wb-jsonmanager event.

Source code 
<div data-wb-urlmapping='{
		"example1a": { "action": "patch", "source": "#jmexample1", "patches": [
				{ "op": "add", "path": "/city", "value": "Gatineau" },
				{ "op": "add", "path": "/fruit", "value": "Apple" }
			]
		},
		"example1b": { "action": "patch", "source": "#jmexample1", "patches": [
				{ "op": "add", "path": "/city", "value": "Ottawa" },
				{ "op": "add", "path": "/fruit", "value": "Orange" }
			]
		},
		"example1c": { "action": "patch", "source": "#jmexample1", "patches": [
				{ "op": "add", "path": "/city", "value": "Hull" }
			]
		},
		"example1d": { "action": "patch", "source": "#jmexample1", "patches": [
				{ "op": "add", "path": "/fruit", "value": "Kiwi" }
			]
		}
	}'></div>

<ul>
	<li><a href="?">Empty <code>?</code></a></li> 
	<li><a href="?example1a">Gatineau and Apple <code>?example1a</code></a></li>
	<li><a href="?example1b">Ottawa and Orange <code>?example1b</code></a></li>
	<li><a href="?example1c&amp;example1d">Hull and Kiwi <code>?example1c&amp;example1d</code></a></li>
</ul>
	
<section class="well" id="jmexample1" data-wb-jsonmanager='{
			"url": "data/data-1.json",
			"name": "example1",
			"wait": true
		}'>
	<h3 class="mrgn-tp-sm">Results</h3>
	<p>My city is: <span data-json-replace="#[example1]/city">somewhere</span></p>
	<p>My fruit is: <span data-json-replace="#[example1]/fruit">all of them</span></p>
</section>

Use the page query for patches

Defaults

It uses the value of the parameter as a key for copying to the parent element.

The city selected is: somewhere

Source code 
<ul data-wb-urlmapping='{ "city" : { "action": "patch", "source": "#jmexample2" } }'>
	<li><a href="?">Empty <code>?</code></a></li> 
	<li><a href="?city=gat">Gatineau <code>?city=gat</code></a></li>
	<li><a href="?city=ott">Ottawa <code>?city=ott</code></a></li>
	<li><a href="?city=vdm">Val-des-monts <code>?city=vdm</code></a></li>
	<li><a href="?city=hull">Hull <code>?city=hull</code></a> (Should do nothing like if leaved empty)</li>
</ul>

<p id="jmexample2" data-wb-jsonmanager='{ "url": "data/data-2.json", "name": "example2", "wait": true }'>The city selected is: <span data-json-replace="#[example2]/city">somewhere</span></p>

The unsafe mode

The keyword "unsafe" was used to warn that whatever the value is, it is taken as is then it's added to the specified path. There is no kind of validation perfomed before the information get displayed by the data-json plugin. Use this function with precaution.

The fruit selected is: nothing

Note: When "Empty" is selected in this example, the data-json do not display the information because it is waiting to receive a patch before to do anything.

Source code 
<ul data-wb-urlmapping='{ "fruit" : { "action": "patch", "source": "#jmexample3", "unsafe": true } }'>
	<li><a href="?">Empty <code>?</code></a></li> 
	<li><a href="?fruit=Apple">Apple <code>?fruit=Apple</code></a></li>
	<li><a href="?fruit=Orange">Orange <code>?fruit=Orange</code></a></li>
	<li><a href="?fruit=Kiwi">Kiwi <code>?fruit=Kiwi</code></a></li>
	<li><a href="?fruit=Banana#ex3">Banana <code>?fruit=Banana</code></a></li>
	<li><a href="?fruit={&quot;type&quot;:true}">Banana <code>?fruit={&quot;type&quot;:true}</code></a></li>
</ul>

<p id="jmexample3" data-wb-jsonmanager='{ "url": "data/data-2.json", "name": "example3", "wait": true }'>The fruit selected is: <span data-json-replace="#[example3]/fruit">nothing</span></p>

Be specific

Defining the following configuration will overwrite/control how the page query could interact with the patches action.

Result:

Source code 
<ul data-wb-urlmapping='{ 
		"ex4a" : { "action": "patch", "source": "#jmexample4", "qname": "city" },
		"ex4b" : { "action": "patch", "source": "#jmexample4", "qname": "city", "qval": "gat" },
		"ex4c=example" : { "action": "patch", "source": "#jmexample4", "qname": "city", "qval": "ott" },
		"ex4d" : { "action": "patch", "source": "#jmexample4", "qname": "province", "base": "/country/" }
	}'>
	<li><a href="?">Empty <code>?</code></a></li> 
	<li><a href="?ex4a">qname is "city", showing nothing <code>?ex4a</code></a></li>
	<li><a href="?ex4a=gat">qname is "city", showing Gatineau <code>?ex4a=gat</code></a></li>
	<li><a href="?ex4a=ott">qname is "city", showing Ottawa <code>?ex4a=ott</code></a></li>
	<li><a href="?ex4b">qname is "city" with "gat" set as value, showing Gatineau <code>?ex4b</code></a></li>
	<li><a href="?ex4c=example">qname is "city" with "ott" set as value, showing Ottawa <code>?ex4c=example</code></a></li>
	<li><a href="?ex4d">qname is "province" with a base path "/country/", showing nothing <code>?ex4d</code></a></li>
	<li><a href="?ex4d=on">qname is "province" with a base path "/country/", showing Ontario <code>?ex4d=on</code></a></li>
	<li><a href="?ex4d=qc">qname is "province" with a base path "/country/", showing Québec <code>?ex4d=qc</code></a></li>
</ul>

<p>Result:</p>
<ul id="jmexample4" data-wb-jsonmanager='{ "url": "data/data-2.json", "name": "example4", "wait": true }'>
	<li>City: <span data-json-replace="#[example4]/city">not defined</span></li>
	<li>Province: <span data-json-replace="#[example4]/country/province">not defined</span></li>
</ul>
Date modified: