Javascript ES6 MV(C)TypeError

时间:2017-07-11 13:48:37

标签: javascript model-view-controller model controller ecmascript-6

我对JavaScript MVC逻辑非常陌生。我试图创建一个简单的应用程序。

我已经设置了示例中的所有内容(在单独的文件中)。未显示的Data.js包含带有一些数据的对象,template.js包含我的html模板字符串。

// 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。

现在的问题是我在main.js中尝试在加载时调用init函数。它转到控制器,调用loadInit()函数然后应该调用this.model.test(),但它不会工作,它会给我以下错误

&#34;未捕获的TypeError:this.model.test不是函数&#34;。

过去几个小时我一直试图寻找解决方案,但我真的迷失在这里。

非常感谢任何帮助。谢谢!

0 个答案:

没有答案