JqueryUI resizable called only first time with meteor

Question

i have a Wierd action here, i am using Meteor 0.7 (latest version), and i want to create a layout for my application where i have a menu on the left and content on the right, and i want it to be resizable, so i used Jquery UI and created teh following code.

<template name="layout">
    {{> header }}
    <div class="container">
        <div class="report-tree">
            {{> report_tree }}
        </div>
        <div class="content">
            {{{ yield }}}
        </div>
    </div>
</template>

also i created this function on Meteor Client,

   Template.report_tree.rendered = function (){
        console.log("report_tree is rendered")
        $("li.parent_li i").attr('class','glyphicon glyphicon-plus-sign');
        $("li.parent_li ul li").hide();

        $(".report-tree").resizable({
            handles : 'e',
            minWidth: '50',
            maxWidth: '350',
            resize: function (){
                $(".content").width($(this).parent().width() - $(this).width() - 30)
            }

        });

        $("#datepicker").datepicker();

    }

the functionality is okay and reveything works fine, however when just click on an link inside my app, i can see that

console.log("report_tree is rendered")

is rendered & the date pickers is working fine, but the resizable function is not called and the div is not aboe to resize, if i clicked on teh refresh button then everything is working back again.

i dont know why this is happening and whether i need to hook my script on a different event or what ?