Backbone.js를 사용하여 간단한 뷰를 만드는 방법-JS 튜토리얼-php.cn

Backbone.js를 사용하여 간단한 뷰를 만드는 방법

不言

풀어 주다： 2018-11-30 17:37:30

원래의

2516명이 탐색했습니다.

Backbone.js를 사용하여 간단한 뷰를 만드는 방법를 사용하여 간단한 뷰를 만드는 방법은 무엇인가요? 이번 글에서는 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;
      $(&#39;#output&#39;).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;
  $(&#39;#output&#39;).append(mView.el);

로그인 후 복사

뷰의 객체를 생성하고 id를 출력하는 태그 요소에 뷰 객체의 el 속성을 추가합니다.

실행 결과

HTML 파일이 웹 브라우저에 표시되면 다음과 같은 효과가 나타납니다. 아무것도 표시되지 않는 것 같습니다.

Backbone.js를 사용하여 간단한 뷰를 만드는 방법 HTML의 출력을 확인하면 id="output"으로 div 태그 내부에 div 태그가 추가된 것을 볼 수 있습니다. 문자열이 페이지에 표시되지는 않지만, 뷰의 뷰 요소가 페이지에 반영되는 것을 확인할 수 있습니다.

예 2: 문자열 표시 뷰

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(&#39;Hello World!&#39;);
          return this;
        }
      });
      var mView = new CView;
      $(&#39;#output&#39;).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(&#39;Hello World!&#39;);          
                        return this;
        }
      });
      var mView = new CView;
      mView.render();
      $(&#39;#output&#39;).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(&#39;Hello World!&#39;);      
    return this;
    }
  });

로그인 후 복사

뷰에 대한 개체를 만듭니다. 페이지 표시를 위해 render() 메서드를 호출합니다. render 메소드를 실행하면 el 속성에 "Hello World!"라는 문자열이 설정되고, 페이지 표시 내용을 준비할 수 있습니다.

그런 다음 값이 id인 요소의 el 속성 내용을 표시합니다. el 속성은 View 객체의 el 속성을 참조할 수 있으며, render() 메서드의 반환값으로 반환되는 View 객체의 el 속성을 참조하여도 동일한 결과를 얻을 수 있습니다.

var mView = new CView;
  $(&#39;#output&#39;).append(mView.render().el);

로그인 후 복사

또는,

var mView = new CView;
  mView.render();
  $(&#39;#output&#39;).append(mView.el);

로그인 후 복사

실행 결과

웹 브라우저를 사용하여 위 HTML 파일을 표시합니다. 아래와 같은 효과가 표시됩니다. "Hello World!"라는 문자열이 페이지에 표시됩니다.

Backbone.js를 사용하여 간단한 뷰를 만드는 방법 HTML의 출력을 확인하면 div 태그 내부에 id="output"으로 div 태그가 추가되고 문자열 "Hello World!"가 작성되었습니다.

위 내용은 Backbone.js를 사용하여 간단한 뷰를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!