Backbone.js를 사용하여 간단한 뷰를 만드는 방법
- 不言원래의
- 2018-11-30 17:37:302495검색
Backbone.js를 사용하여 간단한 뷰를 만드는 방법를 사용하여 간단한 뷰를 만드는 방법은 무엇인가요? 이번 글에서는 Backbone.js를 사용하여 간단한 뷰를 만드는 방법를 사용하여 간단한 뷰를 생성하는 방법을 소개합니다. 구체적인 내용을 살펴보겠습니다.
예 1:
코드는 다음과 같습니다#🎜 🎜## 🎜🎜#다음 HTML 파일을 생성합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-3.2.1.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script type="text/javascript">
$(function () {
var CView = Backbone.View.extend({
});
var mView = new CView;
$('#output').append(mView.el);
});
</script>
</head>
<body>
<div>Header</div>
<div id="output"></div>
<div>Footer</div>
</body>
</html>설명:
var CView = Backbone.View.extend({
});위 코드는 뷰의 객체가 됩니다. 이 코드에서는 아무것도 구현되지 않습니다.
var mView = new CView; $('#output').append(mView.el);
뷰의 객체를 생성하고 id를 출력하는 태그 요소에 뷰 객체의 el 속성을 추가합니다.
실행 결과
HTML 파일이 웹 브라우저에 표시되면 다음과 같은 효과가 나타납니다. 아무것도 표시되지 않는 것 같습니다.
HTML의 출력을 확인하면 id="output"으로 div 태그 내부에 div 태그가 추가된 것을 볼 수 있습니다. 문자열이 페이지에 표시되지는 않지만, 뷰의 뷰 요소가 페이지에 반영되는 것을 확인할 수 있습니다.
View는 문자열을 표시할 수 있도록 구현되었습니다.
코드는 다음과 같습니다
다음 HTML 파일을 작성합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-3.2.1.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script type="text/javascript">
$(function () {
var CView = Backbone.View.extend({
render: function () {
this.$el.text('Hello World!');
return this;
}
});
var mView = new CView;
$('#output').append(mView.render().el);
});
</script>
</head>
<body>
<div>Header</div>
<div id="output"></div>
<div>Footer</div>
</body>
</html>참고: 다음 코드에서도 작동합니다.
$(function () {
var CView = Backbone.View.extend({
render: function () {
this.$el.text('Hello World!');
return this;
}
});
var mView = new CView;
mView.render();
$('#output').append(mView.el);
});Description:
render 메서드의 렌더링 구현을 설명합니다. HTML로 출력할 마크업은 el 객체로 설정됩니다. el의 jquery 객체를 $el로 사용할 수 있습니다. 이 코드에서는 jquery를 사용하므로 el 대신 $el을 사용합니다. 텍스트 메소드를 호출하고 "Hello World!" 문자열을 el 객체에 설정합니다.
var CView = Backbone.View.extend({
render: function () {
this.$el.text('Hello World!');
return this;
}
});뷰에 대한 개체를 만듭니다. 페이지 표시를 위해 render() 메서드를 호출합니다. render 메소드를 실행하면 el 속성에 "Hello World!"라는 문자열이 설정되고, 페이지 표시 내용을 준비할 수 있습니다.
그런 다음 값이 id인 요소의 el 속성 내용을 표시합니다. el 속성은 View 객체의 el 속성을 참조할 수 있으며, render() 메서드의 반환값으로 반환되는 View 객체의 el 속성을 참조하여도 동일한 결과를 얻을 수 있습니다.var mView = new CView; $('#output').append(mView.render().el);
또는,
var mView = new CView; mView.render(); $('#output').append(mView.el);
실행 결과
웹 브라우저를 사용하여 위 HTML 파일을 표시합니다. 아래와 같은 효과가 표시됩니다. "Hello World!"라는 문자열이 페이지에 표시됩니다.
HTML의 출력을 확인하면 div 태그 내부에 id="output"으로 div 태그가 추가되고 문자열 "Hello World!"가 작성되었습니다.
위 내용은 Backbone.js를 사용하여 간단한 뷰를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!