JavaScript_Basic 지식의 Backbone.js 프레임워크의 View 보기를 설명하는 예

백본의 보기는 앱에서 모델의 모양을 반영하는 데 사용됩니다. 그들은 사건을 듣고 그에 따라 반응합니다.
다음 튜토리얼에서는 모델과 컬렉션을 뷰에 바인딩하는 방법을 설명하지 않고 뷰가 자바스크립트 템플릿 라이브러리, 특히 Underscore.js의 _.template을 사용하는 방법에 중점을 둘 것입니다.
여기서는 DOM 요소를 조작하기 위해 jQuery를 사용합니다. 물론 MooTools나 Sizzle과 같은 다른 라이브러리를 사용할 수도 있지만 Backbone의 공식 문서에서는 jQuery를 사용할 것을 권장합니다.
다음으로 검색창을 예로 들어 새 보기를 생성해 보겠습니다.

SearchView = Backbone.View.extend({
  initialize: function(){
    alert("Welcome to Backbone!");
  }
});
var search_view = new SearchView();

모델, 뷰 또는 컬렉션인지 여부에 관계없이 초기화() 메서드는 인스턴스화될 때 자동으로 트리거됩니다.

el 속성
el 속성은 브라우저에서 생성된 DOM 객체를 참조합니다. 각 뷰에는 el 속성이 정의되어 있지 않으면 Backbone은 el 속성으로 빈 div 요소를 생성합니다.
View에 대한 el 속성을 생성하고 이를 #search_containe으로 설정해 보겠습니다.

<div id="search_container"></div>
<script type="text/javascript">
  SearchView = Backbone.View.extend({
    initialize: function(){
      alert("Welcome to Backbone!");
    }
  });

  var search_view = new SearchView({ el: $("#search_container") });
</script>

이때 View의 el 속성은 id가 search_container인 div 요소를 참조합니다. 이제 이 div 요소를 바인딩했으므로 트리거하려는 모든 이벤트는 이 div 요소에 있어야 합니다.

템플릿 로드
Backbone은 Underscore.js에 크게 의존하므로 Underscore.js에서 작은 템플릿을 사용할 수 있습니다.
이제 view가 초기화될 때 render() 메서드가 자동으로 트리거되도록 render() 메서드를 추가하고 이를 초기화()에서 호출해 보겠습니다.
이 render() 메소드는 jQuery를 통해 View의 el 속성에 템플릿을 로드합니다.

<script type="text/template" id="search_template">
 <label>Search</label>
 <input type="text" id="search_input" />
 <input type="button" id="search_button" value="Search" />
</script>

<div id="search_container"></div>

<script type="text/javascript">
  SearchView = Backbone.View.extend({
    initialize: function(){
      this.render();
    },
    render: function(){
      // 通过 Underscore 编译生成模板
      var template = _.template( $("#search_template").html(), {} );
      //讲生成的模板加载到 el 属性中
      this.$el.html( template );
    }
  });

  var search_view = new SearchView({ el: $("#search_container") });
</script>

듣기 이벤트 추가
View의 events 속성을 사용하여 청취 이벤트를 추가합니다. 청취 이벤트는 el 속성의 하위 요소에만 추가될 수 있습니다. 이제 하위 요소 버튼에 리스너 이벤트를 추가해 보겠습니다.

<script type="text/template" id="search_template">
 <label>Search</label>
 <input type="text" id="search_input" />
 <input type="button" id="search_button" value="Search" />
</script>

<div id="search_container"></div>

<script type="text/javascript">
  SearchView = Backbone.View.extend({
    initialize: function(){
      this.render();
    },
    render: function(){
      var template = _.template( $("#search_template").html(), {} );
      this.$el.html( template );
    },
    events: {
      "click input[type=button]": "doSearch"
    },
    doSearch: function( event ){
      // 当 button 被点击时触发 alert 
      alert( "Search for " + $("#search_input").val() );
    }
  });

  var search_view = new SearchView({ el: $("#search_container") });
</script>

템플릿에 매개변수 전달
템플릿은 형식으로 View에서 전달된 매개변수를 사용할 수 있습니다.

<script type="text/template" id="search_template">
  <!-- 通过 <%= %> 形式使用传来的参数 -->
  <label><%= search_label %></label>
  <input type="text" id="search_input" />
  <input type="button" id="search_button" value="Search" />
</script>

<div id="search_container"></div>

<script type="text/javascript">
   SearchView = Backbone.View.extend({
    initialize: function(){
      this.render();
    },
    render: function(){
      //定义需要传递的参数
      var variables = { search_label: "My Search" };
      // 通过 Underscore 生成模板，同时传递参数
      var template = _.template( $("#search_template").html(), variables );
      // Load the compiled HTML into the Backbone "el"
      this.$el.html( template );
    },
    events: {
      "click input[type=button]": "doSearch" 
    },
    doSearch: function( event ){
      alert( "Search for " + $("#search_input").val() );
    }
  });

  var search_view = new SearchView({ el: $("#search_container") });
</script>

DOM 이벤트 처리
뷰의 매우 중요한 기능은 인터페이스 이벤트를 자동으로 바인딩하는 데 도움이 된다는 것입니다. 이전에 이벤트를 인터페이스 레이블에 어떻게 바인딩했는지 기억하시나요? 다음과 같이 보일 수 있습니다:

<p> 
  <input type="button" value="Create" id="create" /> 
  <input type="button" value="Read" id="read" /> 
  <input type="button" value="Update" id="update" /> 
  <input type="button" value="Delete" id="delete" /> 
</p> 
<script type="text/javascript"> 
  function createData() { 
    // todo 
  } 
  function readData() { 
    // todo 
  } 
  function updateData() { 
    // todo 
  } 
  function deleteData() { 
    // todo 
  } 
 
  $('#create').on('click', createData); 
  $('#read').on('click', readData); 
  $('#update').on('click', updateData); 
  $('#delete').on('click', deleteData); 
</script> 

Backbone의 뷰 객체는 DOM과 이벤트 간의 관계를 더 잘 유지하기 위해 이벤트에 대한 자동 바인딩 메커니즘을 제공합니다.

<p id="view"> 
  <input type="button" value="Create" id="create" /> 
  <input type="button" value="Read" id="read" /> 
  <input type="button" value="Update" id="update" /> 
  <input type="button" value="Delete" id="delete" /> 
</p> 
<script type="text/javascript"> 
  var MyView = Backbone.View.extend({ 
    el : '#view', 
    events : { 
      'click #create' : 'createData', 
      'click #read' : 'readData', 
      'click #update' : 'updateData', 
      'click #delete' : 'deleteData' 
    }, 
    createData : function() { 
      // todo 
    }, 
    readData : function() { 
      // todo 
    }, 
    updateData : function() { 
      // todo 
    }, 
    deleteData : function() { 
      // todo 
    } 
  }); 
  var view = new MyView(); 
</script> 

이 예에서는 뷰 ID가 있는 레이블에 네 개의 버튼을 넣고 이 레이블을 뷰 클래스 MyView와 연결했습니다.
뷰 클래스를 정의할 때 뷰의 사용자 이벤트 목록을 나타내는 이벤트 속성을 선언했습니다.

事件名称 选择器 : 事件处理函数

이벤트 이름은 DOM 객체에서 지원하는 모든 이벤트일 수 있고, 선택기는 jQuery 또는 Zepto에서 지원하는 모든 선택기 문자열(레이블 선택기, 클래스 선택기, ID 선택기 등 포함)일 수 있으며, 이벤트 처리 기능은 다음에서 정의되어야 합니다. 뷰 클래스 자체의 메서드 이름입니다.

뷰 객체는 이벤트 목록의 설명을 자동으로 구문 분석합니다. 즉, jQuery 또는 Zepto를 사용하여 선택기가 설명하는 DOM 객체를 얻고 이벤트 핸들러 함수를 이벤트 이름에 바인딩합니다. 이러한 작업은 뷰 클래스가 인스턴스화될 때 자동으로 완료됩니다. 이벤트를 바인딩하는 방법을 의도적으로 생각하는 대신 뷰 클래스 자체의 구조에 더 신경을 쓸 수 있습니다.

또 다른 질문이 걱정될 수 있습니다. 뷰의 DOM 구조가 동적으로 생성되는 경우 Backbone은 이벤트를 동적으로 바인딩하고 바인딩 해제하는 데 해당하는 메서드를 제공합니까?
실제로 이벤트의 이벤트는 선택기에 의해 설명된 요소가 아니라 대리자() 메서드를 통해 뷰 객체의 el 요소에 바인딩되므로 이 문제에 대해 걱정할 필요가 없습니다. 따라서 뷰 내의 구조가 어떻게 변경되더라도 이벤트 내의 이벤트는 유효합니다.
(JQuery에 익숙하신 분이라면 그것이 제공하는 Delegate() 메소드에 대해 아실 겁니다. 이 메소드는 실제로 이벤트를 상위 요소에 바인딩한 후, 이벤트 버블링 과정에서 대상 하위 요소를 확인하여 이벤트를 트리거합니다.)
뷰 객체는 대리자() 메서드를 통해 이벤트를 바인딩합니다. 이는 뷰 구조의 변경이 이벤트에 미치는 영향을 신경 쓸 필요가 없음을 의미합니다. 또한 이벤트의 선택기에 해당하는 요소가 el 내에 있어야 함을 의미합니다. 뷰의 요소, 그렇지 않으면 경계 이벤트가 적용될 수 없습니다.

그럼에도 불구하고 이벤트를 수동으로 바인딩하고 바인딩 해제해야 하는 경우도 있습니다. 해당 뷰 객체는 이벤트 목록을 동적으로 바인딩하고 바인딩 해제하기 위한 DelegateEvents() 및 undelegateEvents() 메서드를 제공합니다. 그들에 대해 알아보세요.
렌더링 뷰 및 데이터
뷰는 주로 인터페이스 이벤트 바인딩과 데이터 렌더링에 사용됩니다. 그러나 뷰 객체는 렌더링과 관련된 하나의 메소드인 render()만 제공하며 로직이 없고 어디에도 참조되지 않는 빈 메소드입니다. 자체 렌더링 로직을 구현하는 것입니다.
뷰에는 많은 인터페이스 로직이 포함될 수 있습니다. 모든 뷰 하위 클래스는 render() 메서드를 오버로드하여 최종 렌더링을 위한 진입 메서드로 사용하는 것이 좋습니다. 팀 개발에서 사양에 따라 엄격하게 코딩하면 다른 사람들이 코드를 더 잘 이해하고 유지하는 데 도움이 될 수 있습니다. ​