0

I'm very new to JavaScript MVC logic. I'm trying to create a simple app.

I've set up everything like in the example (In seperate files ofc). Data.js which is not shown contains an object with some data, and template.js contains my html template strings.

// CONTROLLER

import Model from './models/model';
import View from './views/view';
import Controller from './controllers/controller';
import { $on } from './utility/utility';

export default class Controller {
  constructor(Model, View) {
    this.model = Model;
    this.view = View;
  };
  loadInit() {
    console.log("controller render");
    this.model.test();
    // this.view.render(this.model.data);
  };
}

// MODEL

import data from '../config/data'

data.initialize();

export default class Model {
  constructor() {
    this.data = data;
  };
  test() {
    console.log("Test works");
  };
  generateLists() {
    window.infiniteList = [];
    var articlesList = 'http://lib.lrytas.lt/api/articlesList/article.php?term=/lrytas/' + data.blockTag.slug + '/*&domain=' + data.blockTag.domain;

    $.get(articlesList, function(response) {
      for(let i = 0; i < response.blockTop7.length; i++) {
        if (response.blockTop7[i].n18 == "0") {
          window.infiniteList.push(response.blockTop7[i].main_id);
        }
      };
      for(let i = 0; i < response.newBlock.length; i++) {
        if (response.newBlock[i].n18 == "0") {
          window.infiniteList.push(response.newBlock[i].main_id);
        }
      };
    });
    console.log(infiniteList);
  };
  loadArticle(data) {
    $.get(lr_config.kolumbusApi + 'query/?kpm3id=' + infiniteList[0] + '&ret_fields=props', function(response) {
      let result = response.result["0"].props;
      this.data.update(result);
    });
    window.infiniteList.splice(0,1);
  };
}

// VIEW

import config from '../config/config'
import Template from '../template/template'
import data from '../config/data'

data.initialize();

export default class View {
  constructor() {
    this.el = config.mainWrapper;
  };
  render(Data) {
    console.log("view render");
    this.el.innerHTML += Template(Data);
  };
}

// APP.JS

class App {
  constructor() {
    this.model = new Model();
    this.view = new View();
    this.controller = new Controller(Model, View);
  };
}

const app = new App();

const init = () => {
  app.controller.loadInit();
}

$on(window, 'load', init);

Heres JSBIN.

Now the problem is when I'm trying to call init function on load in main.js. It goes to controller, calls the loadInit() function which then should call this.model.test(), but it wouldnt work and it gives me the following error

"Uncaught TypeError: this.model.test is not a function".

I've been trying to find a solution for past couple hours but I'm really lost here.

Any help would be greatly appreciated. Thanks!

0 Answers0