Components
Sections or areas of your app that are reactive to user input.
Components are sections or areas of your site that you want to be reactive to user input. They can be as big or small as you like. For example, you may have a Signup form component that covers multiple steps or a button component that you reuse throughout your app.
Components are generally made up of Data Properties, Computed Properties, Actions, and an HTML template.
<cfscript>
// Data properties
data = {
"property1": "defaultValue",
"property2": "defaultValue"
};
// Computed properties
computed = {
"computedProperty" : function() {
// return something
}
};
// Actions
function action1() {
data.property1 = "another value";
}
</cfscript>
<!-- HTML Template -->
<cfoutput>
<div>
<h1>My Component</h1>
</div>
</cfoutput>
Within your templates, you can access your Data Properties, Computed Properties, and Actions, and utilize any of the powerful template features listed under Template Features in the left-hand menu. Details on how to use these
Separating Component Definition and Template
You can place the above code in separate files to separate your component and template definitions. CFC components must extend 'cbwire.models.Component'.
./wires/MyComponent.cfc
component extends="cbwire.models.Component" {
// Data properties
data = {
"property1": "defaultValue",
"property2": "defaultValue"
};
// Computed properties
computed = {
"computedProperty" : function() {
// return something
}
};
// Actions
function action1() {
data.property1 = "another value";
}
}
./wires/MyComponent.cfm
<!--- Template --->
<cfoutput>
<div>
<h1>My Component</h1>
</div>
</cfoutput>
Rendering Components
You can render a CBWIRE component using the wire() method.
<!--- ./layouts/Main.cfm --->
<body>
<div>
#wire( "ShowPosts" )#
</div>
</body>
<!--- ./views/posts/index.cfm --->
<cfoutput>
<h1>My Posts</h1>
#wire( "ShowPosts" )#
</cfoutput>
External Components
You can render wires from folders and subfolders outside of the default ./wires folder.
<cfoutput>
<div>
#wire( "myFolder.MyComponent" )#
#wire( "myFolder.subFolder.MyComponent" )#
</div>
</cfoutput>
You can also reference components within another ColdBox module by using the @module syntax.
<cfoutput>
<div>#wire( "MyComponent@myModule" )#</div>
</cfoutput>
Passing Parameters
You can pass data into a component as an additional argument using wire().
<body>
<div>
#wire( "ShowPost", { "post": post } )#
</div>
</body>
By passing in parameters, you can create reusable UI components that are unique but similar in functionality. For example, you could create a Button component that you use throughout your app.
Using Parameters
Parameters are passed into your component's onMount() method. This is an optional method you can add.
<!--- ./views/posts/index.cfm --->
#wire( "ShowPost", { post: currentPost } )#
<!--- ./wires/ShowPost.cfm --->
<cfscript>
data = {
"title": ""
};
function onMount( params, event, rc, prc ) {
data.title = params.post.getTitle();
}
}
</cfscript>
<cfoutput>
<div>Title: #title#</div>
</cfoutput>
Auto Population of Data Properties
As of CBWIRE 3.2, properties that you pass into your component will be automatically populated if onMount() IS NOT defined and a matching data property is found.
<!--- ./views/posts/index.cfm --->
#wire( "ShowPost", { title: "Some title" } )#
<!--- ./wires/ShowPost.cfm --->
<cfscript>
data = {
"title": ""
};
}
</cfscript>
<cfoutput>
<!--- outputs 'Title: Some title --->
<div>Title: #title#</div>
</cfoutput>
Last updated