How to use the framework/ViewRenderer.render function in framework

var tempVideoDrawerArray = [];

            var i = 0;
            var j;
            var len = collectionsArray.length;
            for (; i < len; i++) {
                var currentCollectionData = Util.Object.clone(collectionsArray[i], true);

                var itemIndex = (collectionsData.startPage * collectionsData.countPerPage) + i
                currentCollectionData._index = itemIndex;
                currentCollectionData._collectionStats = this._getCollectionStats(currentCollectionData);
                currentCollectionData._plural = (currentCollectionData.videos.length != 1);

                // render collections
                tempRenderHTML += viewRenderer.render(collectionTemplate, currentCollectionData);
                
                // add length to each video
                for (j = 0; j < currentCollectionData.videos.length; j++) {
                    currentCollectionData.videos[j]._time = Util.secondsToHMSFormat(currentCollectionData.videos[j].duration);
                }

                // organize videos into slides
                var videoDrawerData = this._prepareVideoDrawerData(currentCollectionData.videos);
                
                // assign remaining needed rendering data
                videoDrawerData._index = itemIndex;

                // store the video drawer data
                tempVideoDrawerArray.push(videoDrawerData);

                // once we've displayed our desired amount of videos in this column.

var entireRenderedHTML = '';

            var tempVideoDrawerArray = [];

            var i = 0;
            var j;
            var len = collectionsArray.length;
            for (; i < len; i++) {
                var currentCollectionData = Util.Object.clone(collectionsArray[i], true);
                currentCollectionData._index = i;
                currentCollectionData._collectionStats = this._getCollectionStats(currentCollectionData);
                currentCollectionData._plural = (currentCollectionData.videos.length != 1);

                // render collections
                entireRenderedHTML += viewRenderer.render(collectionTemplate, currentCollectionData);
                
                // add length to each video
                for (j = 0; j < currentCollectionData.videos.length; j++) {
                    currentCollectionData.videos[j]._time = Util.secondsToHMSFormat(currentCollectionData.videos[j].duration);
                }

                // organize videos into slides
                var videoDrawerData = this._prepareVideoDrawerData(currentCollectionData.videos);
                
                // assign remaining needed rendering data
                videoDrawerData._index = i;

                // store the video drawer data
                tempVideoDrawerArray.push(videoDrawerData);

                // once we've displayed our desired amount of videos in this column.

currentCollectionData.videos[j]._time = Util.secondsToHMSFormat(currentCollectionData.videos[j].duration);
                }

                // organize videos into slides
                var videoDrawerData = this._prepareVideoDrawerData(currentCollectionData.videos);
                
                // assign remaining needed rendering data
                videoDrawerData._index = i;

                // store the video drawer data
                tempVideoDrawerArray.push(videoDrawerData);

                // once we've displayed our desired amount of videos in this column.
                // include accumulated video drawer html with the overall html
                if ((i + 1) % collectionsPerRow == 0 || i == len - 1) {
                    entireRenderedHTML += viewRenderer.render(collectionVideoDrawerTemplate, {
                        _videoDrawerClasses: videoDrawerClasses,
                        _videoDrawers: tempVideoDrawerArray
                    });

                    tempVideoDrawerArray.splice(0);
                }
            }

            this._references.$collectionsContainer.html(entireRenderedHTML);
        },

currentCollectionData.videos[j]._time = Util.secondsToHMSFormat(currentCollectionData.videos[j].duration);
                }

                // organize videos into slides
                var videoDrawerData = this._prepareVideoDrawerData(currentCollectionData.videos);
                
                // assign remaining needed rendering data
                videoDrawerData._index = itemIndex;

                // store the video drawer data
                tempVideoDrawerArray.push(videoDrawerData);

                // once we've displayed our desired amount of videos in this column.
                // include accumulated video drawer html with the overall html
                if ((i + 1) % collectionsPerRow == 0 || i == len - 1) {
                    tempRenderHTML += viewRenderer.render(collectionVideoDrawerTemplate, {
                        _videoDrawerClasses: videoDrawerClasses,
                        _videoDrawers: tempVideoDrawerArray
                    });

                    var $wrapper = jQuery('<div>');
                    $wrapper.html(collectionWrapperTemplate);

                    $wrapper.find('.js-collections-page').html(tempRenderHTML);
                    entireRenderedHTML += $wrapper.html();

                    tempVideoDrawerArray.splice(0);
                    tempRenderHTML = '';
                }
            }

            return entireRenderedHTML;</div>

_renderFeaturedCollection: function(featuredcollectionData) {
            var renderedFeaturedCollection = viewRenderer.render(featuredCollectionTemplate, featuredcollectionData);
            this._references.$featuredCollectionContainer.html(renderedFeaturedCollection);
        },

_renderDistrict: function(districtData) {
            var references = this._references;
            var renderData = {
                    district: districtData
           };
            var renderedDistrict = viewRenderer.render(districtTemplate, renderData);
            this._references.$districtContainer.html(renderedDistrict);
            
            references.$districtList = jQuery('.js-districtlist');
            
            this._boundFunctions.onDistrictChosen = this._onDistrictChosen.bind(this);
            references.$districtList.on('change', this._boundFunctions.onDistrictChosen);
            
        },

_renderDistrict: function(districtData) {
            var references = this._references;
            var renderData = {
                    district: districtData
           };
            var renderedDistrict = viewRenderer.render(districtTemplate, renderData);
            this._references.$districtContainer.html(renderedDistrict);
            
            references.$districtList = jQuery('.js-districtlist');
            
            this._boundFunctions.onDistrictChosen = this._onDistrictChosen.bind(this);
            references.$districtList.on('change', this._boundFunctions.onDistrictChosen);
            
        },

_renderDeoTab: function(deoDataTab) {
            
            var references = this._references;
            
            var renderData = {
                    deo: deoDataTab
           };
           var renderedDeoTab = viewRenderer.render(deoTabTemplate, renderData);
           references.$deoTabContainer.html(renderedDeoTab);
           references.$deoTabContainer.find("li:first a").addClass('active');
           references.$selectedDeo = references.$deoTabContainer.find("li:first a").attr("id");
           var that = this;
           references.$deoTabContainer.find("li").click(function(e) 
           {
               references.$deoTabContainer.find("li").each(function(e)
                       {
                           jQuery(this).find("a").removeClass('active');
                       });
               jQuery(this).find("a").addClass('active');
               references.$selectedDeo = jQuery(this).find("a").attr("id");
               that.analyzeDeo();
           });

_renderDistrict: function (districtData) {
            var references = this._references;
            var renderData = {
                district: districtData
            };
            var renderedDistrict = viewRenderer.render(districtTemplate, renderData);
            this._references.$districtContainer.html(renderedDistrict);

            references.$districtList = jQuery('.js-districtlist');

            this._boundFunctions.onDistrictChosen = this._onDistrictChosen.bind(this);
            references.$districtList.on('change', this._boundFunctions.onDistrictChosen);

        },

var i = 0;
            for (; i < pages; i++) {

                var currentPageData = {
                    pageIndex: i,
                    pageNumber: i + 1
                };

                if (i == this._state.currentPageNumber) {
                    currentPageData.classes = 'selected';
                }

                paginationPages.push(currentPageData);
            }

            var renderedPagination = viewRenderer.render(collectionPaginationTemplate, {pages: paginationPages});

            this._references.$paginationContainers.html(renderedPagination);
        },