Statics
The following methods are available as static methods via pz.arr namespace.
Name
Description
clear (array)
Clears out all items from an array. Internally, the native splice method is used.
contains (array, item, fromIndex)
- Determines whether or not the given array contains the specified item.
-
Parameters:
- ● array: Object[]
- ● item: Object
- ● fromIndex: Number (optional)
- Returns: true/false
filter (callback, array)
- Filters out the array elements based on the result of the given function. Creates a new array and pushes the found item in it if the result of the given function is truthy.
-
Parameters:
- ● callback: Function
- ● array: Object[]
- Returns: array of matched items
find (callback, arr, scope)
- Returns the first item in the array which satisfies conditions specified in the passed function (truthy return value).
-
Parameters:
- ● array: Object[]
- ● fn: Function
- ● scope: Object (optional)
- Returns: found item (if any)
- Alias method: pz.find
map (array, callback, scope)
- Creates a new array with the results of calling a provided function on every element in the calling array.
-
Parameters:
- ● callback: Function
- ● array: Object[]
- ● scope: Object (optional)
- Returns: a new array with each element being the result of the callback function.
- This method is actually mapped to Array.map native method.
merge
Merges multiple arrays into one.
The following methods and properties are located under pz.binder namespace.
Properties
Name
Description
binders
- Object containing all predefined data binding attributes. See the live example of available binders out of the box here.
-
Component viewmodel
{
name: 'John',
surname: 'Doe',
middleName: 'Smith',
addresses: [{
street: 'Street 1',
number: 16
}, {
street: 'Street 2',
number: 4
}],
showMiddleName: false,
html: '<span style="color:orange">I'm a span inside of div element!</span>',
checkboxChecked: false,
checkedRadio: 'Radio1',
radioData: ['Radio1', 'Radio2', 'Radio3'],
cities: [{
name: 'City 1',
postalCode: 111111
}, {
name: 'City 2',
postalCode: 222222
}, {
name: 'City 3',
postalCode: 333333
}],
selectedCity: 222222,
bgDark: 'bg-dark',
customValue: 'Some custom value', // can be any type
sayHello: function() {
alert('Hello');
}
} -
-
●
value
<input type="text" data-value="name" />
<input type="text" data-value="surname" /> -
●
each
<ul>
<li data-hidden="addresses.hasData">No addresses added yet!</li>
<li data-hidden="addresses.hasData">Addresses:</li>
<li data-each="addresses" data-visible="addresses.hasData">
<span data-attr-[data-index]="$index">{street}</span>
<span>{number}</span>
// or
<span data-attr-[data-index]="$index" data-text="street"></span>
<span data-text="number"></span>
</li>
</ul> -
hasData is the keyword attached to each array within the viewmodel by the framework.
$index is the keyword we can use within each loop iteration. It holds the current iteration index.
$current is the keyword we can use within each loop iteration. It represents the current item of the loop, the scope.
$root is the keyword we can use anywhere in our template. It represents the root object (the viewmodel itself). -
●
text, interpolation
<span data-text="name"></span>
// or
<span>{name}</span> -
●
if
(Content will(not) be rendered based on condition)
<div data-if="showMiddleName">{middleName}</div> -
●
ifnot
(Content will(not) be rendered based on condition)
<div data-ifnot="showMiddleName">Middle name not available!</div> -
●
visible
(Content will(not) be shown based on condition)
<div data-visible="showMiddleName">{middleName}</div> -
●
hidden
(Content will(not) be hidden based on condition)
<div data-hidden="showMiddleName">Middle name not available!</div> -
●
html
<div data-html="html"></div> -
●
attr
<div data-attr-class="bgDark">I am dark colored!</div>
// if you need data attribute attached, here is an example
<div data-attr-[data-bgcolor]="bgDark">I have custom data attribute attached!</div> -
●
checked
// checkbox
<input type="checkbox" data-checked="checkboxChecked" />
// radio button
<input type="radio" data-each="radioData" data-value="$current" data-checked="$root.checkedRadio" /> -
●
enabled
<input type="text" data-enabled="checkboxChecked" /> -
●
options
<select data-value="selectedCity" data-options="cities" data-optionsvalue="postalCode" data-optionstext="name"></select>
// you can achieve the same result by using each binding
<select data-value="selectedCity">
<option data-each="cities" data-value="postalCode" data-text="name"></option>
</select> -
●
on
(event binding)
<input type="button" value="Say Hello" data-on-click="sayHello" />
-
●
value
- Optionally, you can create your own binders:
-
pz.binder.binders.mycustombinder = {
bind: function() {
// implementation
},
react: function() {
// implementation
},
unbind: function() { // optional - Use this method to, for example, detach an event handler from the element
// implementation
},
handler: function() { // optional - Event handler that will be attached to the element
// implementation
},
event: 'click' // optional - Event name which will trigger the handler
};
// usage:
<div data-mycustombinder="customValue">I'm bound with a custom binder!</div> - The framework automatically recognizes that we've defined a viewmodel and applyBindings function is called internally.
delimiters
- This property represents template syntax delimiters. The text between them will be resolved as the viewmodel property path.
- Default: ['{', '}']
- Accepts: String[]
- Usage:
-
// in your application entry point set the custom delimiters
pz.binder.delimiters = ['{{', '}}'];
// after setting it, the template interpolation should look like this
<span>{{myProperty}}</span>
prefix
- This property represents the directive prefix.
- Default: data
- Accepts: String
- Usage:
-
// in your application entry point set the custom prefix
pz.binder.prefix = 'pz';
// at this point all of the directives will use the given custom prefix
<input pz-value="name" />
<span pz-text="name"></span>
Methods
Name
Description
bind (els, viewModel)
- Binder initialization function. It will take the given viewmodel, recreate all of it's properties as observables and apply bindings to the passed element(s).
-
Parameters:
- ● els: HtmlElement / HtmlElement[]
- ● viewModel: Object
-
Each observable will have following methods attached:
- ● notify
- ● subscribe
- ● unsubscribe
-
Each observable array will have following methods attached:
- ● subscribe
- ● unsubscribe
- ● getFirst
- ● getLast
- ● getAt
- ● removeAll
- ● hasData
- Example usage:
-
// to set a viewmodel observable
myViewModel.myProperty = 'Hello World!'
// to get a viewmodel observable
var myProp = myViewModel.myProperty(); - We don't need to call this function manually, it will be called by the framework within the applyBindings function.
toJSON (value)
- Takes the given viewmodel and recursively unobserve each property.
-
Parameters:
- ● viewModel: Object
- Returns: created JSON
unbind (viewModel)
Takes the given viewmodel and unbind it from it's template.
The following methods are available as static methods via pz.dom namespace.
Name
Description
append (parent, element)
- Inserts new content, specified by the parameter, to the end of the given element.
-
Parameters:
- ● parent: HtmlElement
- ● element: HtmlElement, HtmlString
clone (el)
- Creates a duplicate of given element.
-
Parameters:
- ● el: HtmlElement
- Returns: duplicated element HtmlElement
createElement (tagName)
- Creates a html element based on given tag name.
-
Parameters:
- ● tagName: String
- Returns: created element
- This is just a wrapper for native document.createElement method. The only difference is that it's executed within try...catch statement.
elementMatches (element, selector)
- Checks if the element would be selected by the specified selector string.
-
Parameters:
- ● element: HtmlElement
- ● selector: String
- Returns: true/false
- If supported, native Element.matches method is used.
findElement (rootEl, selector, all)
- Gets single, or all elements within the specified root element, matched by the given selector.
-
Parameters:
- ● rootEl: HtmlElement
- ● selector: String
- ● all: Boolean
- Returns: found html element(s) (if any)
findParent (el, selector, stopSelector)
- Recursively goes up per level to find a parent element based on given selector.
-
Parameters:
- ● el: HtmlElement
- ● selector: String
- ● stopSelector: String (optional)
- Returns: found parent, if any
- stopSelector parameter tells the framework to stop if the parent with this selector is found
getByAttr (attrValue, attrName)
- Looks for the first element within the document that matches the specified selector.
-
Parameters:
- ● attrValue: Any
- ● attrName: String
- Returns: HtmlElement
getEl (selector, options)
- Finds an element by given selector and options object if passed in.
-
Parameters:
- ● selector: String
- ● options: Object (optional)
- Passed options can contain the following properties:
-
- ● all: Boolean
- ● rootEl: HtmlElement
- options.all tells the framework whether to return the first or all found elmenent(s) based on given selector. options.rootEl tells the framework the root contaner within it will look for the element(s). document is used if this option is left out.
indexOf (child)
- Gets the position (index) of the given html element within it's parent.
-
Parameters:
- ● element: HtmlElement
insertAfter (element, newNode)
- Inserts new content, specified by the parameter, after the the given element.
-
Parameters:
- ● parent: HtmlElement
- ● newNode: HtmlElement, HtmlString
insertAt (parent, newNode, index)
- Adds a child element at the given index.
-
Parameters:
- ● parent: HtmlElement
- ● newNode: HtmlElement
- ● index: Number
insertBefore (element, newNode)
- Inserts new content, specified by the parameter, before the the given element.
-
Parameters:
- ● parent: HtmlElement
- ● newNode: HtmlElement, HtmlString
off (element, event)
- Removes an event handler.
-
Parameters:
- ● element: HtmlElement
- ● event: String (optional)
on (event, element, selector, fn)
- Attach an event handler function for given event to the selected elements.
-
Parameters:
- ● event: String
- ● element: HtmlElement
- ● selector: String (optional)
- ● fn: Function
parseTemplate (template)
- Parses a string into a html element(s).
-
Parameters:
- ● template: String
- Returns: dom node(s)
prepend (parent, element)
- Inserts new content, specified by the parameter, to the beginning of the given element.
-
Parameters:
- ● parent: HtmlElement
- ● element: HtmlElement, HtmlString
remove (element)
- Removes a html element from the DOM.
-
Parameters:
- ● element: HtmlElement
replaceWith (node, newNode)
- Takes an element and replaces it with provided new element.
-
Parameters:
- ● node: HtmlElement
- ● newNode: HtmlElement
The following methods are available as static methods via pz.events namespace.
Name
Description
publish (name, args)
- Dispatches custom event handler attached via pz.events.subscribe method.
-
Parameters:
- ● name: String
- ● params: Any
subscribe (name, listener)
- Registers a new subscription method.
-
Parameters:
- ● name: String
- ● listener: Function
The following methods are available as static methods via pz.obj namespace.
Name
Description
assignTo (target, source, clone)
- Loops through the source object properties and assign them to the passed target object. If supported, the native assignTo method is used.
-
Parameters:
- ● target: Object
- ● source: Object
- ● clone: Boolean (optional)
- Returns: object with assigned properties.
- Alias method: pz.assignTo
clone (obj)
- Creates an object duplicate.
-
Parameters:
- ● object: Object
- Returns: duplicated object.
getKeys (obj)
- This method returns an array of a given object's own property names.
-
Parameters:
- ● object: Object
- Returns: String[] array of property names.
- This method is actually mapped to Object.keys native method.
getValues (obj)
- This method returns an array of a given object's own enumerable property values.
-
Parameters:
- ● object: Object
- Returns: list of property values.
- If supported, native Object.values method is used.
The following methods are available as static methods via pz.str namespace.
Name
Description
camelize (str)
Converts a given string to a camel case format.
capitalize (str)
Capitalizes the first letter of the given string.
contains (str, value)
- Determines whether or not the given string contains the specified value.
-
Parameters:
- ● str: String
- ● value: Object
- Returns: true/false
format (str, values)
- Converts the tokenized string into the string with corresponding values passed as a second parameter. Each token must be unique, and must increment in the format.
-
Parameters:
- ● str: String
- ● values: the values to be replaced, in order
- Usage:
-
var str = 'Hello {0} from {1}';
var result = pz.str.format(str, 'World', 'PlazarJS');
// result is equal to 'Hello World from PlazarJS'