MVC小例子

一个mvc的在线小实例

MVC

<div id="app"></div>

const view ={
  el:'#app',
  template:'',
  render(lists){
    this.template += `<ul>`;
    $(lists).each((index,list) => {
      this.template += `<li style="border-bottom:1px solid red;>
      <div class=title>${list.title}</div>
      <div class=author>作者:${list.author.loginname}</div>
    </li>`;
    });
    this.template += `<ul>`;
    $(this.el).html(this.template);
  }
};

const model = {
  lists:[],
  getLists(){
    return $.get('https://cnodejs.org/api/v1/topics',({data})=>{this.lists = data;});
  }
};

const controller = {
  init(view,model){
    this.view = view;
    this.model = model;
    this.model.getLists().then(()=> this.view.render(this.model.lists));
    this.bindEvents();
  },
  bindEvents(){
    this.handleClick();
  },
  handleClick(){
    $(this.view.el).on('click', '.title', ev => {
      ev.target.style.color = 'red;
    });
  }
};

controller.init(view,model);

JS Bin

踩坑

<div class=title>${list.title}</div>
<div class=author>作者:${list.author.loginname}</div>

在模板字符串中，
写成双引号class="title"会渲染成class=" title",当中有个空格，不知什么原因(:з」∠)
因此，建议写成没有引号class=title,或者单引号class='title'