\n})\n```\n\n## Components\nComponents helps to create your code more reusable. You can for example create a button with some functionality\nand use it on multiple places with different parameters.\n\nIn the first example, there is a component that returns a text. The text is different in each `.app` element.\nComponents can receive arguments. Arguments are placed behind a comma (`,`) and are also separated by a comma (`,`).\n\n```html\n{{component text}}
\n{{component text, text: 'Second app'}}
\n{{component text, text: 'Third app'}}
\n\n```\n\nNow, let's take a look on nested components. If the component is nested inside another component,\nthen it's parent component must have some root element in which the component is placed. The root element is not necessary for a plain text.\n\n```html\n{{component shareArticle, articleName: 'Article 1'}}
\n{{component shareArticle, articleName: 'Article 2'}}
\n{{component shareArticle, articleName: 'Article 3'}}
\n\n```\n\n### Complete Components Configuration\n```javascript\nBrackets.render({\n\tafterRender: ,\n\tbeforeRender: ,\n\taddData: ,\n\tcacheKey: ,\n\tdata: ,\n\tinstanceId ,\n\tmethods: ,\n\tonStatusChange: ,\n\tresultCacheEnabled: ,\n\ttemplate: \n})\n```\n\n## Configuration Reserved Keywords\nThis keywords you must not use in the configuration object `_create, _data, _destroy, _instanceId, _hash, _type, _parent, _setStatus, _status`.\n\n## Rendering Instances\nRendering instances are interactive objects that were used during the rendering process of each template or component. \nEach rendering instance have an `id`. Because there can be multiple instances during the rendering process, you can set `instanceId` parameter. This parameter will be than used as a prefix for the instance so the instance id will be `-`. This will help you to find the instance you want to work with.\n\nThe following example shows how to work with instances.\n```javascript\nBrackets.getRenderingInstances() // Returns an object containing all rendering instances\nvar myInstance = Brackets.getRenderingInstance('my-instance-1234') // Returns the selected instance\nmyInstance.data.number += 2 // Changing data structure in the renderingInstance will trigger the selected instance redrawal\nmyInstance.addData('key', 'value'); // This will add new data by key into the data object\n```\n\nInstances have also some statuses. You can use string or pass the constant from brackets object `Brackets.renderingInstancesStatuses.`\n\t\n- **create**: When the instance is succesfully created.\n- **pending**: The default status after creation.\n- **redrawing**: When the instance is being redrawed.\n- **renderingToString**: When the instance template is being rendered into string.\n- **renderingToStringDone**: When the instance template is rendered to string.\n- **bindingEventHandlers**: When event handlers for the component are being attached.\n- **redrawingDone**: When the instance is completely redrawed and ready to use.\n- **destroy**: When the instance is being removed.\n\nThe default state after creating is `pending`. Then, before the whole rendering process starts and before the `beforeRender`method, the instance is set to `processing`. After the rendering the instance is set to `rendered`. \n\nYou can listen to these changes by providing `onStatusChange` parameter, that must be a function. The rendered instance is passed as `this` parameter and the status parameter is passed as a function argument. The usage is as follows.\n\n```javascript\nBrackets.render({\n\t...\n\tonStatusChange: function (status) {\n\t\tconsole.log(this) // Will log the whole instance\n\t\tconsole.log(status) // Logs current instance status\n\t}\n\t...\n})\n```\n\n## Security\nEvery variable passed into the template is autoescaped! If you want to disable the autoescaping for your variable add the `noescape` filter.\n\n```javascript\n{{$variable|noescape}}\n```\n","readmeFilename":"readme.md"}![](\"https://github.com/apicart/brackets/blob/master/logo.png\"){kind=logo}
\n\t![\"\"](\"https://travis-ci.org/apicart/brackets.svg?branch=master\")
\n\t\n\t\n\t\t![\"\"](\"https://img.shields.io/npm/v/@apicart/brackets.svg\")
\n\t\n\t\n\t\t![\"\"](\"https://img.shields.io/npm/dt/@apicart/brackets.svg\")
\n\t\n\t\n\t\t![\"\"](\"https://img.shields.io/github/license/apicart/brackets.svg\")
\n\t\n