extending a form

darkhan kubigenov

unread,

Aug 19, 2013, 4:26:40 PM8/19/13

to rapt...@googlegroups.com

I am trying to implement an extended form using raptor templates which will have an additional hidden input such as

<cool:form>
First name: <input type="text" name="firstname">
</cool:form>

would compile to

<form>
First name: <input type="text" name="firstname">

Is it possible to do it in raptor?

Patrick Steele-Idem

unread,

Aug 19, 2013, 4:59:41 PM8/19/13

to

Hi Darkhan,

Yes, you just need to create a custom tag that will render the form tags and the additional hidden fields.

The first step is to create the "cool" taglib which will look something like the following:

<raptor-taglib>
    <tlib-version>1.0</tlib-version>
    <uri>cool</uri>
    
    <tag name="form" renderer="cool/FormTag" dynamic-attributes="true">
    </tag>
    
</raptor-taglib>

You'll want to name this file "cool.rtld" and place it in the root of your "source" directory (that is part of the RaptorJS resource search path).

The implementation of "src/cool/FormTag.js" would look something like the following:

define(
    'cool/FormTag',
    function(require) {
        var templating = require('raptor/templating');

        return {
            render: function(input, context) {
                var hiddenFields = [
                    {name: 'firstname', value: 'hidValue'}
                ];
                
                templating.render(
                    'cool/Form.rhtml',
                    {
                        dynamicAttributes: input.dynamicAttributes,
                        invokeBody: input.invokeBody,
                        hiddenFields: hiddenFields
                    },
                    context);
            }
        };
    });

In the above code, the renderer for the <cool:form> tag uses another template to render its view, but it is also possible to render the HTML using context.write(str) instead (e.g. context.write('<form>') )

Lastly, the implementation of the "src/cool/Form.rhtml" template would look something like the following:

<c:template xmlns:c="core"
    name="cool/Form"
    params="dynamicAttributes,invokeBody,hiddenFields">
    
    <form c:attrs="dynamicAttributes"> <!-- Include the dynamic attributes -->
        <!-- Render the nested body content -->
        <c:invoke function="invokeBody()" c:if="invokeBody"/>

        <!-- Render out the hidden fields -->
        <input type="hidden" 
            name="$hiddenField.name" 
            value="$hiddenField.value" 
            c:for="hiddenField in hiddenFields"/>
    </form>

</c:template>

End result:

<!-- Input template: -->
<cool:form name="my-form" action="/handle-submit" method="get">

First name: <input type="text" name="firstname"/>

</cool:form>

<!-- Output HTML -->
<form name="my-form" action="/handle-submit" method="get">

    First name: <input type="text" name="firstname">
    <input type="hidden" name="firstname" value="hidValue">
</form>

I hope that helps.

Thanks,

Patrick

darkhan kubigenov

unread,

Aug 19, 2013, 5:21:57 PM8/19/13

to rapt...@googlegroups.com

Patrick,

Thanks for thorough answer.

First name: <input type="text" name="firstname"> <input type="hidden" name="firstname" value="hidValue"> </form>