Simple View Backbone.js 프레임워크에 학습 노트 작성

Simple View Backbone.js 프레임워크에 학습 노트 작성_기본 지식

WBOY

풀어 주다： 2016-05-16 15:15:49

원래의

1074명이 탐색했습니다.

전통적으로 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="js/lib/jquery.min.js"></script>
  <script src="js/lib/underscore-min.js"></script>
  <script src="js/lib/backbone-min.js"></script>
  <script src="build/x.js"></script>
</body>
</html>

로그인 후 복사

그 중 x.js는 duo가 생성한 js입니다. 파일에 인용된 여러 js는 Baidu 정적 리소스 라이브러리

에서 다운로드할 수 있습니다.

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: 뷰가 나타내는 DOM 요소가 렌더링 함수의 DOM 작업과 동기화됨을 나타냅니다.
initialze: new가 호출되면 생성자와 유사하게 함수 호출이 트리거됩니다.
render: DOM 작업을 트리거하면 브라우저가 렌더링됩니다.
마지막 문장은 매개변수가 new로 전달될 수 있음을 보여줍니다

의심
new ListView({el: '.wrapper'})로 작성하는 경우에도 가능합니다.
하지만 el 자체의 의미를 고려하면 $를 추가하는 것이 더 명확합니다.

$el과 $()
$(this.el)은 this.$el과 동일합니다
$(this.el).find('.wrapper')는 this.$('.wrapper')와 동일합니다

세트엘리먼트
값과 바인딩 이벤트를 포함하여 el의 내용을 수정하려면 setElement를 사용하면 됩니다. 다음 예에서 setElement는 el의 참조를 버튼1에서 버튼2로 변경할 뿐만 아니라 클릭 이벤트도 동기적으로 변경합니다.

// 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 : 내부적으로 사용되는 데이터로 초기화 시 초기화 가능
이벤트: 선언 형식, '이벤트 선택기': 'func', 이전 $('.wrapper 버튼#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="build/2.js"></script>

로그인 후 복사

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}));
...

로그인 후 복사