How to create jQuery UI stuff in templates? #37

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

Comments

Projects
None yet
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

This comment has been minimized.

Show comment
Hide comment
@BorisMoore

BorisMoore Feb 16, 2012

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....

Owner

BorisMoore commented Feb 16, 2012

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

This comment has been minimized.

Show comment
Hide comment
@BorisMoore

BorisMoore Dec 3, 2012

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...

Owner

BorisMoore commented Dec 3, 2012

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