传统上用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

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。