极乐门资源网

Backbone.js框架中简单的View视图编写学习笔记
网络编程 2025/1/17 佚名
2 0
极乐门资源网 Design By www.ioogu.com

传统上用jQuery操作DOM，就类似C语言中的goto语句，随着项目复杂度增大，会越来越难以维护。
关于MVC（以及后续的MVP，MVVM），网上资源很多，就不展开。我们直接用代码来操练。

index.html
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Backbone</title>
</head>

<body>
  <div class="wrapper"></div>
  <script src="/UploadFiles/2021-04-02/jquery.min.js">


其中，x.js是用duo生成后的js。文件中引用的几个js，都可以从百度静态资源库中下载到


1.js







var ListView = Backbone.View.extend({
 //el: $('.wrapper'),

 // 初始化函数，new时，backbone会自动调用
 initialize: function() {
  this.render();
 },

 // 真正把修改操作同步到浏览器中
 render: function() {
  this.$el.append("<ul><li>Hello techfellow!</li></ul>");
 }
});

var listView = new ListView({el: $('.wrapper')});







执行：





$duo 1.js






知识点说明


    
  
  • el：表示该View所代表的DOM元素，在render函数中，会同步到DOM操作中去。
    • 
  
  • initialze：调用new时，会触发的函数调用，类似构造函数。
    • 
  
  • render：触发DOM操作，浏览器会渲染
    • 
  
  • 最后一句，说明在new时，可以传递参数
    • 



疑惑

如果写成 new ListView({el: '.wrapper'})也是可以的。

但考虑到el本身的含义，还是加上$更清晰些。


    
  
  • $el和$()
    • 
  
  • $(this.el) 等价于 this.$el
    • 
  
  • $(this.el).find('.wrapper') 等价于 this.$('.wrapper')
    • 



setElement

如果想修改el内容，包括值和绑定事件，可以使用setElement。下面这个例子中，setElement不仅仅把el的引用从button1改为button2，连click事件也同步修改过去了。





// We create two DOM elements representing buttons
// which could easily be containers or something else
var button1 = $('<button></button>');
var button2 = $('<button></button>');

// Define a new view
var View = Backbone.View.extend({
   events: {
    click: function(e) {
     console.log(view.el === e.target);
    }
   }
  });

// Create a new instance of the view, applying it
// to button1
var view = new View({el: button1});

// Apply the view to button2 using setElement
view.setElement(button2);

button1.trigger('click');
button2.trigger('click'); // returns true







事件处理和模板解析都是前端渲染必需的工作，backbone一般把这些内容放到View里面统一处理。

2.js







var ListView = Backbone.View.extend({
 el: $('.wrapper'),

 events: {
  'click button#add': 'addItem'
 },

 // 初始化函数，new时，backbone会自动调用
 initialize: function() {
  // 用于计数
  this.counter = 0;
  this.render();
 },

 // 真正把修改操作同步到浏览器中
 render: function() {
  this.$el.append("<button id='add'>点击添加</button><ul></ul>");
 },

 // event handler
 addItem: function() {
  this.counter++;
  this.$('ul').append("<li>Hello techfellow, " + this.counter + " time(s)");
 }
});

var listView = new ListView();







执行：





$duo 2.js






知识点


    
  
  • this.counter：内部使用的数据，可以initialize中初始化
    • 
  
  • events：声明格式，'event selector': 'func'，这比之前$('.wrapper button#add').on('click', function(){...}); 的方式要清晰许多了。
    • 



模板


在index.html中加入：





<script type="text/template" id="tplItem">
  <li>Hello techfellow, <%= counter %> time(s)</li>
</script>
<!--要放在2.js前面，否则在执行时，可能遇到找不到tplItem的情况-->
<script src="/UploadFiles/2021-04-02/2.js">


在View的声明中修改：





events: {
 'click button#add': 'addItem'
},

template: _.template($('#tplItem').html()),







修改addItem：





addItem: function() {
 this.counter++;
 this.$('ul').append(this.template({counter: this.counter}));
}






同理，这里的模板可以替换为任何第三方模板引擎。

比如：artTemplate





var template = require('./lib/template.js');
...
this.$('ul').append(template('tplItem', {counter: this.counter}));
...
标签：
Backbone,View,视图,JavaScript
极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“Backbone.js框架中简单的View视图编写学习笔记”

暂无Backbone.js框架中简单的View视图编写学习笔记的评论...
www.ioogu.com 极乐门资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
极乐门资源网 Design By www.ioogu.com