raziloVM

EXPERIMENTAL TESTING ONLY

Playing with some data binding, looking for a modular es6 binding solution.

Do the following in webroot

Create an es6 style app file to import raziloVM called app.js

``javascript import RaziloVM from 'razilovm'

var rvm = new RaziloVM(document.querySelector('#test'), model);

// Use with different html attribute prefix to append foo- to biginning of each razilo attribute // var rvm = new RaziloVM(document.querySelector('#test'), model, {'prefix': 'ng'});`

next create an index.html to load from browser, to bind your model to, saved as index.html in web root

`html Test


			Hello how are you

            

            1 foo - 
            

            2 foo1 - 
            

            3 foo2 - 
            

            4 'boo' - 
            

            5 222 - 
            

            6 bar.foobar - 
            

            7 bar['foobar'] - 
            

            8 bar.barfoo.bf - 
            

            9 bar.barfoo['bf'] - 
            

            10 bar['barfoo']['bf'] - 
            

            11 bar['foo'][0] - 
            

            12 bar.foo[1] - 
            

            13 bar.foo - 
            

            14 test - 
            

            15 bar[test] - 
            

            16 bar[test][0] - 
            

            17 test2 - 
            

            18 bar[test][test2] - 
            

            19 test3.t3 - 
            

            20 bar[test3.t3] - 
            

            21 bar[test3['t3']] - 
            

            22 Html binding string <strong>strong text</strong> - 
			

            23 Html binding property 'html' - 
			

            24 Attribute binding various attributes from string - INSPECT ME
			

            25 Attribute binding various attributes from array (also embedded function) - INSPECT ME
			

            26 Attribute binding various attributes from property - INSPECT ME
			

            27 data binding methods - 
			

			28 if/else binding, remove and add on conditional - [show if true] [show if false]
			

			29 if/else binding on property, remove and add on conditional (model.booly) - [show if booly true] [show if booly false]
			

			30 else binding on property, with child binded elements - Showing binded elements: 
			

			31 functions in objects - This is green text
			

			32 for loop [simple] from array:
			
				
					
					
					
				

			

			

			33 for loop [simple] from object:
			
				  

			

			

			34 for loop [simple] from property:
			
				  

			

			

			35 sending phantom value into method()
			
				 

			

			

			36 setting phantom names for 'for' loops (the unreal respresentation of the current itteration in the loop, i.e. how we access the data in a loop)
			
				
                       
                

			

			

			37 using objects with 'for' loops instead of an array
			
				 

			

			

			38 using alterers to change resolved bindable data - [START][END]
			

            39 Binding value to input -  - 
			

            40 Binding value to textarea - 

			

            41 Binding value to select - 

			
			

            42 Binding value to select array of objects - 

			
			

            43 Binding checked to checkbox - Boom!!!
			

            44 Binding checked to radio buttons - Selected: 
			

			

			

			
			

            45 Binding file upload - Selected: 
			

			
			

            46 Binding value on multi select -  Selected: 
			

			
			

            47 Binding events on element click -
            
            :
			

            48 Binding events on element mouseenter/mouseleave -
            Mouse Over Me!
            :
			

            49 JSON Alterer - model.bar - 
			

            50 Not (!) Alterer - object - , bool false - , int 0 - 
			

            51 Prefix/Suffix Alterers - add http://www. to beginning and .co.uk to end ----- 
			

            52 Date Alterer (ported from dateFormat felixge/node-dateformat) -
			timsetamp  -
			date object  -
			date string 
			

			53 Join Alterer (join array/object values as string) -


To compile es6 to es5 with raziloVM included (if creating an es6 project), first create .babelrc file in webroot

`json { "presets": ["es2015"] }`

Next create Gruntfile.js in webroot to run the transform to es5 compiled file (./dist/dist.js)

`js module.exports = function (grunt) { grunt.initConfig({ browserify: { dist: { options: { transform: [ ["babelify"] ] }, files: { // output file < input file/s "./dist/dist.js": ["./app.js"] } } }, watch: { scripts: { // watchers for playing with and uploading in realtime files: ["./src//.js", "./node_modules/razilovm//.js"], tasks: ["browserify"] } } });

grunt.loadNpmTasks("grunt-browserify"); grunt.loadNpmTasks("grunt-contrib-watch");

grunt.registerTask("default", ["watch"]); grunt.registerTask("build", ["browserify"]); };`

next add a package.js file to your web root to handle npm details

`json { "author": { "name": "You", "url": "your url" }, "description": "", "name": "test", "version": "0.0.1", "dependencies": { "razilovm": "^0.1.0" }, "devDependencies": { "babel-core": "^6.7.4", "babel-preset-es2015": "^6.6.0", "babelify": "^7.2.0", "grunt": "^1.0.1", "grunt-browserify": "^5.0.0", "grunt-contrib-watch": "^1.0.0" } }`

Once complete, open a terminal in your webroot and run

`npm install`

to pull in raziloVM and all dependancies for dev (building to from es6 > es5)

Once complete, build your distribution file and load index.html in browser.

`grunt build`

Optionally you can watch for changes to razilovm and your project to update on file changes

`grunt`

`Usage`

`Binders`

Bind model properties to HTML elements via attributes. Substitue for the binder to use bind-="", such as bind-text, bind-show...

* bind-text - (all resolvers, phantom) Bind data to element contents * bind-show - (all resolvers, phantom) Show element if data truthy * bind-hide - (all resolvers, phantom) Hide element if data truthy * bind-style - (objects or properties, phantom) Apply style to element from data as object data {'color': 'red'} object embedded model properties {'color': color} or model object * bind-class - (objects, arrays, strings or properties, phantom) Apply classes to element from data as object data {'foobar': truthy}, arrays ['foo', modelProperty, ... ], string 'foobar' or property fooBar (string value, object with truthies or array) * bind-html - (string, property, phantom), bind to elements innerHTML replacing contents with html, use with caution, only bind HTML from trusted sources. * bind-attribute - (string, array, object, property, phantom), adds attribute to element via string, array, object or property. use objects with truthy or stirng/array to ad attribute only, or objects with key as attribute and value as attribute value to populate the attribute value. * bind-if - (property, method, boolean, phantom) Add or remove an element from dom based on a truthy conditional. * bind-else - (property, method, boolean, phantom) Add or remove an element from dom based on a falsey conditional. bind-for - (property, method, object, array, phantom) Add multiple elements by looping over resolved data (generates phantom properties, defaults $key, $value). Can use order-for="{key: value,..}", filter-for="{key: ['', foobar, '*']}", limit-for="10", offset-for="1" to affect the for loop * bind-value - (property, method, phantom) Bind a model to inputs, selects, options... anything that takes a value. updated to the elements will be changed on the model! If using mutliple select, will give an array of option values. * bind-checked - (property, method, phantom) As per bind-value... but for inputs that check something, e.g. checkboxes and radio buttons. * bind-event - (object) Bind any event types of the element to functions in the model using {'eventName': method()}. Methods contain the event followed by any properties sent in e.g. method(event, propertyA, propertyB,...)

`Resolvers`

Data that can be resolved when using with HTML bindable attributes. Resolvers work on binders, alterers and configs.

* array - one time bindable array, or updatable embedded properties. "['literal', updatable.object['data'], method(), ...]" * object - one time bindable object, or updatable embedded properties, methods. "{'literal': 'data', 'updatable': object['data'], 'a-method': method(), ...}" * string - one time literal "'literal'" * number - one time number "12345" * boolean - one time boolean "true" or "false" * property - updatable model value "foo.bar['baz']", "foo[foobar['baz']]", ... * method - updatable model method "foo('test')", "foo[foobar['baz']](foobar)", "foo.bar({object['data']: 'data'})", NOTE: updates only if method changes or method variables are properties as either will force re-evaluation... * phantom - updateble property that resolves to an iterable instance. Turns arrays/object keys/properties into phantom properties (defaults $key, $value, can be changed in binder configs that use phantoms

`Configurators`

You can configure some binders, to do this substitue for the binder to configureconfig-="", such as config-for="{'key': 'foo', 'value', bar}" to use phantom resolvers (an object/array iteration) in your html as $foo and $bar when iterating using for binders as so...

`html



Alterers

Changes that you can apply to binded data. Alterers change the resolved data before using it in the binded element, such as trimming whitespace on strings. Substitue for the binder to alteralter-="", such as alter-text, alter-show... with the alterer/s specified in attribute value such as

`html

Alterers... may or may not take options in as data to act on when required. When multiple alterers affect a single bind type, the affects are cumulative.

* trim - Trims resolved data of whitespace at front and rear of string. No options used.
* json - Stringifies property as a JSON string.
* prefix - Add something to start of a string {'prefix': 'something'}.
* suffix - Add something to end of a string {'suffix': 'something'}.
* not - Get the boolean opposite of the property.
* date - Convert string, date object, timestamp into formatted date string {'date': '1978/11/01'}.
* join - Joins the values of array/object as a string and returns result.

raziloVM

EXPERIMENTAL TESTING ONLY

Playing with some data binding, looking for a modular es6 binding solution.

Do the following in webroot

Create an es6 style app file to import raziloVM called app.js

``javascript import RaziloVM from 'razilovm'

var rvm = new RaziloVM(document.querySelector('#test'), model);

// Use with different html attribute prefix to append foo- to biginning of each razilo attribute // var rvm = new RaziloVM(document.querySelector('#test'), model, {'prefix': 'ng'});`

next create an index.html to load from browser, to bind your model to, saved as index.html in web root

`html Test


			Hello how are you

            

            1 foo - 
            

            2 foo1 - 
            

            3 foo2 - 
            

            4 'boo' - 
            

            5 222 - 
            

            6 bar.foobar - 
            

            7 bar['foobar'] - 
            

            8 bar.barfoo.bf - 
            

            9 bar.barfoo['bf'] - 
            

            10 bar['barfoo']['bf'] - 
            

            11 bar['foo'][0] - 
            

            12 bar.foo[1] - 
            

            13 bar.foo - 
            

            14 test - 
            

            15 bar[test] - 
            

            16 bar[test][0] - 
            

            17 test2 - 
            

            18 bar[test][test2] - 
            

            19 test3.t3 - 
            

            20 bar[test3.t3] - 
            

            21 bar[test3['t3']] - 
            

            22 Html binding string <strong>strong text</strong> - 
			

            23 Html binding property 'html' - 
			

            24 Attribute binding various attributes from string - INSPECT ME
			

            25 Attribute binding various attributes from array (also embedded function) - INSPECT ME
			

            26 Attribute binding various attributes from property - INSPECT ME
			

            27 data binding methods - 
			

			28 if/else binding, remove and add on conditional - [show if true] [show if false]
			

			29 if/else binding on property, remove and add on conditional (model.booly) - [show if booly true] [show if booly false]
			

			30 else binding on property, with child binded elements - Showing binded elements: 
			

			31 functions in objects - This is green text
			

			32 for loop [simple] from array:
			
				
					
					
					
				

			

			

			33 for loop [simple] from object:
			
				  

			

			

			34 for loop [simple] from property:
			
				  

			

			

			35 sending phantom value into method()
			
				 

			

			

			36 setting phantom names for 'for' loops (the unreal respresentation of the current itteration in the loop, i.e. how we access the data in a loop)
			
				
                       
                

			

			

			37 using objects with 'for' loops instead of an array
			
				 

			

			

			38 using alterers to change resolved bindable data - [START][END]
			

            39 Binding value to input -  - 
			

            40 Binding value to textarea - 

			

            41 Binding value to select - 

			
			

            42 Binding value to select array of objects - 

			
			

            43 Binding checked to checkbox - Boom!!!
			

            44 Binding checked to radio buttons - Selected: 
			

			

			

			
			

            45 Binding file upload - Selected: 
			

			
			

            46 Binding value on multi select -  Selected: 
			

			
			

            47 Binding events on element click -
            
            :
			

            48 Binding events on element mouseenter/mouseleave -
            Mouse Over Me!
            :
			

            49 JSON Alterer - model.bar - 
			

            50 Not (!) Alterer - object - , bool false - , int 0 - 
			

            51 Prefix/Suffix Alterers - add http://www. to beginning and .co.uk to end ----- 
			

            52 Date Alterer (ported from dateFormat felixge/node-dateformat) -
			timsetamp  -
			date object  -
			date string 
			

			53 Join Alterer (join array/object values as string) -


To compile es6 to es5 with raziloVM included (if creating an es6 project), first create .babelrc file in webroot

`json { "presets": ["es2015"] }`

Next create Gruntfile.js in webroot to run the transform to es5 compiled file (./dist/dist.js)

grunt.loadNpmTasks("grunt-browserify"); grunt.loadNpmTasks("grunt-contrib-watch");

grunt.registerTask("default", ["watch"]); grunt.registerTask("build", ["browserify"]); };`

next add a package.js file to your web root to handle npm details

Once complete, open a terminal in your webroot and run

`npm install`

to pull in raziloVM and all dependancies for dev (building to from es6 > es5)

Once complete, build your distribution file and load index.html in browser.

`grunt build`

Optionally you can watch for changes to razilovm and your project to update on file changes

`grunt`

`Usage`

`Binders`

Bind model properties to HTML elements via attributes. Substitue for the binder to use bind-="", such as bind-text, bind-show...

`Resolvers`

Data that can be resolved when using with HTML bindable attributes. Resolvers work on binders, alterers and configs.

`Configurators`

`html



Alterers

`html

Alterers... may or may not take options in as data to act on when required. When multiple alterers affect a single bind type, the affects are cumulative.