Conductors are used to preprocess any custom html tags of your choosing and inject a generated view within that tag. They come in two forms. Both forms require a tag name as the first argument and either a callback function or view definition as the second argument. Internally, conductors will simply apply the view binding against the custom node with a new instance of the view definition.
During pre-processing of the DOM nodes, when we find a node that has a conductor attached to it, that node's attributes are evaluated against the current bidningContext IF the value inside of the attribute begins with $view, $data, $root, or $parent. These evaulated attributes will then be passed along to the callback method or into the constructor of the view definition as an object who's properties are the lowercase'd attribute and the evaluated value. If the value of the attribute is an observable, the observable will not be unwrapped, instead the reference to the observable will be passed along.
ko.bindingProvider.instance.preprocessNode. If a preprocessor is already defined, then it will be saved and recalled from within Falcon's Conductor preprocessor method.
- tag
- The custom HTML tag to identify this conductor with.
- view_definition
- The view definition to instantiate each time this conductor is executed. Optionally, as a shorthand way to define a view, this may be an object that will be passed into the Falcon.View.extend() method and assigned as the view_definition.
1 var HelloWorldView = Falcon.View.extend({
2 url: "#hello-world-tmpl",
3 initialize: function(attributes) {
4 this.message = attributes['message'] || "World";
5 }
6 });
7
8 Falcon.addConductor('hello-world', HelloWorldView);
9
10 Falcon.apply({name: "Spot"});
1 <html>
2 <head>
3 <script src="knockout-3.1.0.js"></script>
4 <script src="falcon.min.js"></script>
5 <script src="falcon.conductor.min.js"></script>
6 <script src="application.js"></script>
7 </head>
8 <body>
9 <hello-world></hello-world>
10 <br />
11 <hello-world message="$data.name"></hello-world>
12 </body>
13 <template id="hello-world-tmpl">
14 Hello <!-- ko text: $view.message --><!-- /ko -->!
15 </template>
16 </html>
Hello World!
Hello Spot!
- tag
- The custom HTML tag to identify this conductor with.
- callback
- A callback method to trigger on each node match. This method should return an instance of the view you would like to inject into the node and will be called with the arguments:
- node - A reference to the node being processed.
- attributes - An object of the evaluated attributes. ex: If we have an attribute
title="$data.title"then the value of $data.title will be assigned to the 'title' property of this object. - bindingcontext - The current binding context. An object containing '$view', '$parent', '$root', '$data', etc. properties
1 var HelloWorldView = Falcon.View.extend({
2 url: "#hello-world-tmpl",
3 initialize: function(message) {
4 this.message = message || "World";
5 }
6 });
7
8 // Callback conductors must return an instance of a Falcon.View
9 Falcon.addConductor('hello-world', function(node, attributes, bindingContext) {
10 return new HelloWorldView(attributes['message']);
11 });
12
13 Falcon.apply({name: "Spot"});
1 <html>
2 <head>
3 <script src="knockout-3.1.0.js"></script>
4 <script src="falcon.min.js"></script>
5 <script src="falcon.conductor.min.js"></script>
6 <script src="application.js"></script>
7 </head>
8 <body>
9 <hello-world></hello-world>
10 <br />
11 <hello-world message="$data.name"></hello-world>
12 </body>
13 <template id="hello-world-tmpl">
14 Hello <!-- ko text: $view.message --><!-- /ko -->!
15 </template>
16 </html>
Hello World!
Hello Spot!