Skip to content

How to create jQuery UI stuff in templates? #37

Closed
athalay opened this Issue Feb 16, 2012 · 2 comments

2 participants

@athalay
athalay commented Feb 16, 2012

Dear All,

I like the templating thing, but I want to create a little bit more complex UI, eg. using jQuery sliders in the templates or using min-max values for textboxes (via jstepper) etc.

All these things require javascript/jquery code to be executed.

My problem is that neither via Helpers nor via delegates I can't achieve this.

My example code is (SORRY, I don't know why does gitHub screw the formatting!):

<div id="rr" style="background-color: Lime">    
</div>

<script id="rrTemplate" type="text/x-jquery-tmpl">
    <p>
        <span>Number of full rounds:</span>
        <input data-getfrom="[NumOfFullRounds]" data-to="[NumOfFullRounds]" class="numericValue"/>
    </p>
    <p>
        Reps in partial round:
    </p>

    {{#each RepetitionItems}}
        <div>
            <span><input id="txtRep{{=Id}}" data-getfrom="[Value]" data-to="[Value]" class="numericValue XXX"/></span>
            {{=$ctx.setMinAndMaxValue("#txtRep" + Id, 0, Max)}}
            <span data-getfrom="[Value]"></span>
        </div>
    {{/each}}
</script>

<script type="text/javascript"> 

    $.views.registerHelpers({
        setMinAndMaxValue: function(selector, minVal, maxVal){
            alert("setMinAndMaxValue called, but jQuery selector will not work :( ");

            $(selector).click(function(){alert("jQuery worked in the template!");}); //the jQuery selector will find nothing
            $(selector).jStepper({minValue:minVal, maxValue:maxVal}); //the jQuery selector will find nothing
            return "";
        },      
    });


    $(document).ready(function () {

             var regVM = {"NumOfFullRounds":5,"RepetitionItems":[{"Max":2,"Value":0,"Id":"A1"},{"Max":4,"Value":0,"Id":"A2"},{"Max":6,"Value":0,"Id":"A3"}]};

        var templi = $("#rrTemplate").template();
        $("#rr").link(regVM, templi)
            .on("load", ".XXX", function(s)
            {
                alert("textbox loaded!"); //this line never executed
                $(selector).jStepper({minValue:minVal, maxValue:maxVal}); //so this line can't attach anything also :(
            });
    });
</script>

When the setMinAndMax values are executed, jQuery can't find the elements defined in the selector.

Via the "on" I can't make it work to fire when the textboxes are displayed (via the templates).

I know that helpers are for generating output, but I think it would be much better to hold the template and jquery ui-displaying code in one place, than separated all over.

I'd appreciate any replies.

Thanks!

@BorisMoore
Owner

I agree, packaging the code and templates together is important and that is what the presenter concept is about. I am working on the beta version at the moment, and this will include more support for this. I will come back to this issue, after JsRender beta is out, to include this scenario support in the subsequent JsViews beta....

@BorisMoore
Owner

This functionality is now available through JsViews Tag Controls.

Two examples are available in the current samples.
http://borismoore.github.com/jsviews/demos/tag-controls/tree-control.html
http://borismoore.github.com/jsviews/demos/tag-controls/tabs-control.html

More to follow...

Closing this issue, but further feedback welcome. Please reopen if you want to discuss the scenario further...

@BorisMoore BorisMoore closed this Dec 3, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.