nest-parrot
Version:
Parrot built on react
279 lines (276 loc) • 13.2 kB
JSX
(function (context, $) {
var $demo = $pt.getService(context, '$demo');
var painter = function () {
var items = [
{
id: 'data',
title: 'ModelInterface',
pattern: '$pt.createModel(jsons: JSON|JSON[], validator: ModelValidator) : ModelClass',
desc: <span><code>ModelInterface</code>, and its dynamic implementation instance <code>ModelClass</code>
which create base on JSON is the core of Parrot.<br/>
Two-way data binding is base on the event mechanism of this object.<br/>
<br/>
<strong>
Parameter <code>id</code> in its functions can be connected by '_',
see <code>$pt.setValueIntoJSON</code> and <code>$pt.getValueFromJSON</code>.
When declaring the layout JSON object, key or <code>dataId</code> is used to match this
<code>id</code>,
so it makes key or <code>dataId</code> in layout can be connected by '_' too.<br/>
It's very important, remember this please.
</strong></span>,
children: [
{
id: 'data-property',
title: 'Property',
children: [
{
id: 'data-add',
title: '#add',
pattern: '#add(id: string, row: JSON, index) : ModelInterface',
desc: <span>Add a JSON object into the array which located by give id. Returns model itself.<br/>
Parameter <code>index</code> is optional, default push data at the end of array.<br/>
Fire event <code>{'\u007B'}model: this, id: id, array: data, index: index,
old: null, new: row, time: "post", type: "add"{'\u007D'}</code>.</span>
}, {
id: 'data-get',
title: '#get',
pattern: '#get(id: string) : *',
desc: 'Get value from model.'
}, {
id: 'data-isRequired',
title: '#isRequired',
pattern: '#isRequired(id: string) : boolean',
desc: <span>Check the given id is required or not, returns true only when <code>required:
true</code> is declared in validator.</span>
}, {
id: 'data-remove',
title: '#remove',
pattern: '#remove(id: string, row: JSON) : ModelInterface',
desc: <span>Remove a JSON object from the array which located by give id.
Returns model itself. Note the JSON removed from array must be exactly <strong>same
object (===)</strong> as parameter.<br/>
Fire event <code>{'\u007B'}model: this, id: id, array: data, index: index, old: row,
new: null, time: "post", type: "remove"{'\u007D'}</code>,
Note the oldRow updated from array must be exactly <strong>same object (===)</strong> as parameter.</span>
}, {
id: 'data-set',
title: '#set',
pattern: '#set(id: string, value: *) : ModelInterface',
desc: <span>Set value into model.<br/>
Fire event <code>{'\u007B'}model: this, id: id, old: oldValue, new: value, time: "post",
type: "change"{'\u007D'}</code></span>
}, {
id: 'data-update',
title: '#update',
pattern: '#update(id: string, oldRow: JSON, newRow: JSON) : ModelInterface',
desc: <span>Set value into model.<br/>
Fire event <code>{'\u007B'}model: this, id: id, array: data, index: index, old: oldRow,
new: newRow, time: "post", type: "change"{'\u007D'}</code>,
Note the oldRow updated from array must be exactly <strong>same object (===)</strong> as parameter.</span>
}
]
}, {
id: 'data-event',
title: 'Event',
children: [
{
id: 'data-addListener',
title: '#addListener',
pattern: '#addListener(id: string|RegExp, time: string, type: string, listener: function) : ModelInterface',
desc: <span>Add listener to monitor the data changing or something.<br/>
1. <code>id</code>: can be property name or aa RegExp. Or keep <code>null</code> to monitor all change.<br/>
2. <code>time</code>: <code>pre</code> or <code>post</code>. Currently only <code>post</code> is opened.<br/>
3. <code>type</code>: <code>add</code>, <code>remove</code>, <code>change</code> or <code>validate</code>.<br/>
4. <code>listener</code>: with one parameter <code>evt</code>.
Event is a JSON object, content depends event type and trigger timing.<br/>
Returns model itself.</span>
}, {
id: 'data-addPostChangeListener',
title: '#addPostChangeListener',
pattern: '#addPostChangeListener(id: string|RegExp, listener: function) : ModelInterface',
desc:
<span>Shortcut to add a listener on <code>post</code> + <code>change</code>.</span>
}, {
id: 'data-fireEvent',
title: '#fireEvent',
pattern: '#fireEvent(evt: JSON) : ModelInterface',
desc: 'Fire given event.'
}, {
id: 'data-removeListener',
title: '#removeListener',
pattern: '#removeListener(id: string|RegExp, time: string, type: string, listener: function) : ModelInterface',
desc: <span>Add listener to monitor the data changing or something.<br/>
1. <code>id</code>: can be property name or aa RegExp. Or keep <code>null</code> to monitor all change.<br/>
2. <code>time</code>: <code>pre</code> or <code>post</code>. Currently only <code>post</code> is opened.<br/>
3. <code>type</code>: <code>add</code>, <code>remove</code>, <code>change</code> or <code>validate</code>.<br/>
4. <code>listener</code>: with one parameter <code>evt</code>.
Event is a JSON object, content depends event type and trigger timing.<br/>
Note the listener removed from array must be exactly <strong>same object
(===)</strong> as parameter.<br/>
Returns model itself.</span>
}, {
id: 'data-removePostChangeListener',
title: '#removePostChangeListener',
pattern: '#removePostChangeListener(id: string|RegExp, listener: function) : ModelInterface',
desc:
<span>Shortcut to remove a listener on <code>post</code> + <code>change</code>.</span>
}
]
}, {
id: 'data-validator',
title: 'Validator',
children: [
{
id: 'data-clearValidateResults',
title: '#clearValidateResults',
pattern: '#clearValidateResults(id: string) : ModelInterface',
desc: 'Clear validation result of given id, or clear all if no parameter passed.'
}, {
id: 'data-getError',
title: '#getError',
pattern: '#getError(id: string) : string|string[]|TableValidationResult|JSON',
desc: <span>Get error of given id, or whole errors. <br/>
When it is a simple property, should be string or string array. <br/>
When it is an array, returns TableValidationResult. <br/>
No id given, JSON returns.</span>
}, {
id: 'data-getValidator',
title: '#getValidator',
pattern: '#getValidator() : ModelValidator',
desc: 'Get model validator.'
}, {
id: 'data-setValidator',
title: '#setValidator',
pattern: '#setValidator(validator: ModelValidator, clearValidateResults: boolean)',
desc: 'Set model validator. The second parameter is optional, pass true to clear existed validation results.'
}, {
id: 'data-hasError',
title: '#hasError',
pattern: '#hasError(id: string) : boolean',
desc: 'Check there is error existed of given id, or error existed for whole data model if no id given.'
}, {
id: 'data-mergeError',
title: '#mergeError',
pattern: '#mergeError(error: string|string[]|TableValidationResult|JSON, id: string) : ModelInterface',
desc: 'Merge error into data model. Note it is replace, and replace all if no id given.'
}, {
id: 'data-validate',
title: '#validate',
pattern: '#validate(id: string) : ModelInterface',
desc: <span>Validate the given id, or whole model if no id given.</span>
}, {
id: 'data-validateByPhase',
title: '#validateByPhase',
pattern: '#validateByPhase(phase: string, id: string) : ModelInterface',
desc: <span>Validate the given id and appointed phase, whole rules if no phase given and whole model if no id given.</span>
}
]
}, {
id: 'data-model',
title: 'Myself',
children: [
{
id: 'data-getCurrentModel',
title: '#getCurrentModel',
pattern: '#getCurrentModel() : JSON',
desc: 'Get current JSON data model.'
}, {
id: 'data-getOriginalModel',
title: '#getOriginalModel',
pattern: '#getOriginalModel() : JSON',
desc: <span>Get original model, which constructs this data model object.<br/>
All operations are use the current model, recreate the current model from original model when call <code>reset</code>.
Use original model to do operations after call <code>useBaseAsCurrent</code>.</span>
}, {
id: 'data-isChanged',
title: '#isChanged',
pattern: '#isChanged() : boolean',
desc: 'Check the data model is changed or not.'
}, {
id: 'data-mergeCurrentModel',
title: '#mergeCurrentModel',
pattern: '#mergeCurrentModel(newModel: JSON) : ModelInterface',
desc: 'Merge data from give model to current model. Deep copy by call jQuery.'
}, {
id: 'data-applyCurrentToBase',
title: '#applyCurrentToBase',
pattern: '#applyCurrentToBase() : ModelInterface',
desc: 'Apply current model data to base model.'
}, {
id: 'data-name',
title: '#name',
pattern: '#name(name: string) : ModelInterface|string',
desc: 'Get name when no parameter passed, return name of model. Or set given parameter as name, return data model itself.'
}, {
id: 'data-parent',
title: '#parent',
pattern: '#parent(parent: *) : ModelInterface|*',
desc: 'Get parent when no parameter passed, return parent of model. Or set given parameter as parent, return data model itself.'
}, {
id: 'data-reset',
title: '#reset',
pattern: '#reset() : ModelInterface',
desc: <span>Reset current model, clear validation result and reset changed to false.
Note the current model is recreated base on original model.</span>
}, {
id: 'data-useBaseAsCurrent',
title: '#useBaseAsCurrent',
pattern: '#useBaseAsCurrent() : ModelInterface',
desc: <span>Use original model as current model. The two model will be same object after call this method.
Call <code>reset</code> to re-separate them, but data write into original model cannot be reset again.</span>
}
]
},
]
}, {
id: 'data-cloneJSON',
title: 'cloneJSON',
pattern: '$pt.cloneJSON(jsons: JSON) : JSON',
desc: <span>Clone JSON object, call jQuery <code>$.extend(true, {'\u007B\u007D'}, json);</code></span>
}, {
id: 'data-createModel',
title: 'createModel',
pattern: '$pt.createModel(jsons: JSON|JSON[], validator: ModelValidator) : ModelClass',
desc: 'Create a ModelClass instance.'
}, {
id: 'data-getValueFromJSON',
title: 'getValueFromJSON',
pattern: '$pt.getValueFromJSON(jsons: JSON, id: string) : *',
desc: <span>Get value from JSON object. Id can be key names connected by '_'.<br/>
eg. a JSON <code>var json = {'\u007B'}a: {'\u007B'}b: {'\u007B'}c:
1{'\u007D\u007D\u007D'};</code>, <br/>
call <code>$pt.getValueFromJSON(json, 'a_b_c');</code>, return <code>1</code>.</span>
}, {
id: 'data-setValueIntoJSON',
title: 'setValueIntoJSON',
pattern: '$pt.setValueIntoJSON(jsons: JSON, id: string, value: *) : $pt',
desc: <span>Set value from JSON object. Id can be key names connected by '_'.<br/>
eg. a JSON <code>var json = {'\u007B'}{'\u007D'}</code>, <br/>
call <code>$pt.setValueIntoJSON(json, 'a_b_c', 1);</code>,<br/>
result is <code>{'\u007B'}a: {'\u007B'}b: {'\u007B'}c: 1{'\u007D\u007D\u007D'}</code>.<br/>
If the middle sections in json is null, create it as empty JSON object.</span>
}, {
id: 'data-constants',
title: 'Constants',
children: [
{
id: 'data-BUILD_PROPERTY_VISITOR',
title: 'BUILD_PROPERTY_VISITOR',
pattern: '$pt.BUILD_PROPERTY_VISITOR',
desc: <span>Boolean value, default is true.
<code>$pt.createModel</code> will create the getter/setter for first level properties if property exists.
And after that, can visit the property via such as <code>getName()</code> and <code>setName()</code>,
if the JSON object in parameter is <code>{'\u007B'}name: 'value'{'\u007D'}</code>. <br/>
For reduce the memory costing, set this constant to false to close this feature.
Use <code>get</code> and <code>set</code> instead.</span>
}
]
}
];
return items;
};
var renderer = $pt.getService($demo, 'renderer');
renderer.data = function () {
React.render(<APIList title='Data Model' items={painter()}/>, document.getElementById('main'));
};
}(this, jQuery));