前言

• 恭喜你在2023年还得去学习12年前的技术，希望下文能对你快速完成需求有所帮助，哈哈~
• 下面内容小白请依次阅读，大佬请出门左转~

backbone官网的一些概念

mvc 是啥

• 后端的mvc

• js 里面的mvc职责

• 然后我基于这个项目理解的mvc

backbone和Marionette的关系

我理解的这两个库的关系是marionette 是基于backbone 做了一层高度封装，方便业务使用，扩展了一些东西。类似于 vue 和element-ui这种关系。

项目目录

• 总的目录

基于mvc的设计，项目划分成了

• ctrls 表示控制器， 会加载views

• views 表示视图层，这里会去加载module 和 template

• modules 和后台交互获得数据，或者需要处理数据在这里搞

• templates 通过渲染引擎 生成页面

项目路由

主要文件说明

• main.js 主入口 类似于vue的main.js 文件

• 注册应用，类似于vue的app文件

• 项目路由和ctx变成绑定到window，方便每个页面的使用

一个页面的大概显示流程

module获取数据

view层如何把数据传到template里面

• 单个view里面如何把数据传入到template里面

• 如何全局给每个view 里面都传入数据，

// 通过操作view类让itemview继承这个方法，从而实现在tpl文件里面可以得到变量langInfo
Marionette.View.prototype.templateHelpers = function() {
return {
   langInfo: Ctx.langInfo,
   foo: 456464564564
  }
};

建议把ItemView 的api都看一下，都有点印象之后就随便玩了

• 别的参数： https://marionettejs.com/docs/v2.4.7/marionette.itemview.html#itemview-serializedata (opens new window)

参考资料

backbone 学习资料 (opens new window)