Backbone.js의View에서 "el"을 지정하는 방법 "tagName, id"를 지정하는 방법
6931 단어 jQueryBackbone.jsJavaScript
이 경우 View에 대한 자신의 이해를 기록합니다.
이번에 만든 샘플.
https://github.com/JK0602/backbone_single_page
이런 느낌의 페이지... 디자인... 샘플이라서...
chrome는 로컬 파일에 접근할 수 있도록 설정해야 합니다...
http://www.finefinefine.jp/web/jquery/kiji861/
보기를 지정할 수 있는 두 가지 방법이 있습니다.
(1).이미 존재하는 DOM 요소를 el로 지정
(2).새 엘
다음은 샘플에 사용되는 기본 HTML입니다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href="css/common.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/lib/require.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="wrapper">
<!-- ヘッダー -->
<div id="header"></div>
<!-- メインコンテンツ -->
<div id="content"></div>
<!-- フッター -->
<div id="footer"></div>
</div>
</body>
</html>
el: $("#header"),
에서 설명한 대로 해당 매개변수의 값을 수정합니다.(1)
HeaderView.js
var HeaderView = Backbone.View.extend({
el: $("#header"), //←既に存在するDOMエレメントを指定
//以下イベント登録など
events: {
...
});
tagName: "div",
id: "cnt-index",
이렇게 함으로써
this.el은'
AppView.js
var AppView = Backbone.View.extend({
tagName: "div", //←新しくelを作る場合
id: "cnt-index",
template: null,
//イベント登録など
...
//描画
render: function(){
this.$el.html(this.template());
$("#content").html(this.el);
...
return this;
},
});
$("#content").html(this.el);
그래서 index.html의
index.html
<div id="content"></div>
index.html
<div id="content">
<div id='cnt-index'>
ページＡ
....
</div>
</div>
하면, 만약, 만약...
index.html
<div id="content">
<div id='cnt-next'>
ページB
....
</div>
</div>
el: $("#content"),
이렇게 지정한 내용을 페이지 A와 B 사이를 전환하면 되지 않을까요? 처음에는 그렇게 생각했지만 만약에 엘이 같다면 페이지 A가 설정한 활동이 페이지 B에서도 움직이기 때문에 이렇게 새로운 엘을 만드는 방법으로 만들었습니다...
Reference
이 문제에 관하여(Backbone.js의View에서 "el"을 지정하는 방법 "tagName, id"를 지정하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/JK0602@github/items/c366bc17583ff1a373a6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
