Как сделать бесконечный свиток внутри MVC

Question

Я создаю бесконечный свиток с ванильным javascript и ядром PHP и небольшим API внутри MVC, я проверяю несколько учебных пособий, и когда я пробую вне моего MVC, все работает нормально, но Мне нужно это исправить. Я полагаю, что это связано с визуализацией моего представления, но вот мой код:

Мой контроллер:

<?php
class Blog extends Controller{ 
    //Controller owns a database constructor
    function __construct(){
        parent::__construct();
    }
    function render(){
        //I need to render here the query result
        $this->view->render('blog/index');
    }
}
?>

Небольшой API для принятия нового запроса при достижении следующего div :

<?php
// may I include this inside the blog.php controller?
// If this is possible, how this change the fetch of the URL?
    require_once 'app/model/blogmodel.php';
    if (isset($_GET['action']) && isset($_GET['page'])){
        $news= new blogModel();
        $page =(int)$_GET['page'];
        $data = $news->getData($page);
        echo json_encode($data);
    }
?>

. js файл:

let block=false, page=0;

window.onload=async function(){
    this.loadItems();
}

window.addEventListener("scroll", async function(event){
    const scrollHeight= this.scrollY;
    const viewportHeight= document.documentElement.clientHeight;
    const moreScroll= document.querySelector('#more-news').offsetTop;
    const currentScroll= scrollHeight + viewportHeight;
    if((currentScroll>=moreScroll)&&block===false){ //when scroll reach the bottom
        block=true;
        this.setTimeout(()=>{
            loadItems();
            block=false;
        }, 1500); //wait 1,5s to load more items
    } 
});

async function loadItems(){
    const data =await requestData(page);
    const response=data[0]; //result value 200 or 400
    if (response.response=='200'){
        const items= data[1]; //elements of query
        page = data[2].page; 
        renderItems(items);
    } else if (response.response=='400'){
        alert('no more items to load');
    }
}

function requestData(n){
    //I believe that here is the error but I don't know
    const url = 'http://localhost/mvc/app/libs/api.php?action=more&page=' + n;
    console.log(url);
    const response = this.fetch(url)
    .then(result=>result.json())
    .then(data=>data)
    return response;
}

function renderItems(data){
    let news=document.querySelector('#news');
    data.forEach(element => {
        news.innerHTML+= `
        <div class="news">
            <div class="image">
                <img src="${element.image}" alt="">
            </div>
            <div class="title">
                ${element.title};
            </div>
            <div class="author">
                ${element.author};
            </div>
            <div class="date">
                ${element.date};
            </div>
            <div class="text">
                ${element.text};
            </div>
        </div>
        `;
    });

}

и модель:

<?php
session_start();
Class blogModel extends Model{
    public function __construct()
    {
        parent::__construct();
    }
    public function getData($section){
        try{
            $query=$this->db->connect()->prepare('SELECT * FROM news LIMIT :section,2');
            $query->execute(['section' => $section]);
            $result=[];
            $items=[];
            $n=$query->rowCount();
            if($n){
                while($row=$query->fetch(PDO::FETCH_ASSOC)){
                $item= Array(
                    'title' => $row['title'],
                    'text' => $row['text'],
                    'date' => $row['date'],
                    'author' => $row['author'],
                    'image' => $row['image']
                );
                array_push($items, $item);
                }
                array_push($result, Array('response' => "200"));
                array_push($result, $items);
                array_push($result, Array('page' => ($section + $n)));
                return $result;
            } else{
                array_push($result, Array('response' => "400"));
                return $result;
            }
        } catch(PDOException $e){
            print_r('Error connection: '. $e->getMessage());
        }
    }
}

Мой вид ничего не показывает, я понимаю, что я нужно рендерить извлеченные данные, но как это сделать? Это мой взгляд на пару DIV для загрузки новых запросов:

<div id="news"></div>
<div id="more-news"></div>
<script src="<?php echo constant('URL');?>public/js/blog.js"></script>

Пожалуйста, помогите

, если вам нужен весь код, чтобы лучше понять, вот ссылка на GitHub: github. ком / andrewfreites / mvc