เพิ่ม jsrender ใน views/layout/main.php ใน Yii2

เพิ่มใน AppAsset ใน Yii2

'js/masonry.pkgd.min.js','js/imagesloaded.js','js/classie.js','js/AnimOnScroll.js','js/modernizr.custom.js'

'css/component.css'

/views/dhamma/index.php

 	<div class="quote col-lg-12 col-md-12  col-sm-12 col-xs-12" style="padding-left:0px;padding-right:0px;">
		<div class="quote-header column-flex" style="padding:10px;align-items:flex-start">
			<span style="font-size:25px">ข้อคิดสอนใจ</span>
		</div>
		<ul class="grid effect-1" id="grid">
	
		</ul>
		
	    <div id="load_more" class=" button_blue">
	    	<a href="javascript:loadmore();" id="load">
	    		<i id="spin" class="icon-spinner9"></i>โหลดเพิ่มคลิก!</a>
				</div>
		
	</div>

script

  window.onload = loadmore;
	    function loadmore() {
			
		
			    var $ = window.jsrender;  
			    var markup = document.getElementById("myTmpl").innerHTML; // Get template markup from script block contents
			    var tmpl = $.templates(markup);                           // Compile template from markup string
	   			var rand = 5;
		 
				document.getElementById("accumulate").value=Number(document.getElementById("accumulate").value)+rand;
			
				var data= Number(document.getElementById("accumulate").value);
						//alert(data);
				var pos  = Number(document.getElementById("pos").value);
		   	 jQuery.ajax({
				 type:'GET',
		   		 url:frontend_url+"/download/get_quote_content?pos="+pos+"&data="+data,
		   		 dataType:'json',
		   		 success:function(quote_data){
					   document.getElementById("pos").value= quote_data.pos;
					 var boxPhoto = tmpl.render(quote_data.data);     
					 document.getElementById('grid').innerHTML=boxPhoto ;
 	          		 new AnimOnScroll( document.getElementById( 'grid' ),{
 	             	   minDuration : 0.4,
 	            		maxDuration : 0.7,
 	              	  viewportFactor : 0.2
 	             	   });
				 }
			  });
					                         
	    }

script

  <script id="myTmpl" type="text/x-jsrender">
    <li >
        <div class="frame_th">
            <figure>
                <a href="{{:readmore}}"><img src="{{:img.src}}" alt="" /></a>
                
            </figure>
         
        </div>
    </li>
</script>

frontend/controllers/DownloadController.php

 public function actionGet_quote_content(){
		 Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
		$pos = $_REQUEST['pos'];
		$data = $_REQUEST['data'];
		$contents = Content::find()->where(['content_category_id'=>14])->orderBy('created_at DESC')->limit($data )->all();
		$quote_data=array();
		
		for($i=0;$i<count($contents);++$i){
			$content=$contents[$i];
			$image =Yii::getAlias("@ImagePath/uploads/content/").$content->image_path;
		$detail =["id"=>$content->id,"readmore"=>Yii::getAlias("@frontend_url/quote/view?id=").$content->id,"_new"=>$content->title,"_id_content"=>"","description"=>$content->details,"img"=>["src"=>$image ]];
				array_push($quote_data,$detail);
			
		}
		
			    return array("pos"=>$pos+count($contents),"data"=>$quote_data);
	}