backbone.js 뷰를 기존 요소에 첨부하는 것과 el을 DOM에 삽입하는 것 비교

backbone.js 뷰를 기존 요소에 첨부하는 것과 el을 DOM에 삽입하는 것 비교

---

나는 내 첫 번째 실제 비 튜토리얼 백본 앱을 구현하고 있으며 el, DOM에 렌더링 된 뷰를 주입하는 것과 사용하는 것과 관련된 backbone.js를 사용하는 측면에 대해 2 가지 질문이 있습니다. 에 대한 기존 요소 el. 여기에서 "가르 칠 수있는 시간"을 여러분 모두에게 제공하고 도움을 주셔서 감사합니다.

웹에서 볼 수있는 대부분의 Backbone View 예제는 View를 만들 때 tagName, id 및 / 또는 className을 지정하여 DOM에서 연결되지 않은 el을 만듭니다. 일반적으로 다음과 같습니다.

App.MyView = Backbone.View.extend({
    tagName: 'li',
    initialize: function () {
     ...
    },
    render: function () { 
        $(this.el).html(<render an html template>);
        return this;
    }
}); 

그러나 튜토리얼이 항상 렌더링 된 el을 DOM에 가져 오는 방법을 설명하는 것은 아닙니다. 나는 그것을 몇 가지 다른 방법으로 보았다. 그래서, 내 첫 번째 질문은 : 뷰의 렌더링 메소드를 호출하고 그 el을 DOM에 삽입하기에 적절한 장소는 어디입니까? (필수적으로 동일한 장소가 아님). 라우터, 뷰의 초기화 또는 렌더링 기능 또는 루트 수준 문서 준비 기능에서 수행 한 것을 보았습니다. ( $(function ()). 이 작업 중 어느 것이 든 상상할 수 있지만 올바른 방법이 있습니까?

둘째, HTML 마크 업 / 와이어 프레임으로 시작하여 html 부분을 백본 뷰에 해당하는 js 템플릿으로 변환합니다. 뷰가 첨부되지 않은 요소를 렌더링하도록하고 html에 앵커 포인트를 제공하여 고정하는 대신 뷰에 대해 하나의 요소 만 있고 사라지지 않을 때 더 자연스러운 느낌을줍니다. 비어있는 기존 래퍼 요소 (종종 a div또는 span)를 el자체로 사용합니다. 이렇게하면 첨부되지 않은 el을 삽입하기 위해 문서에서 위치를 찾는 것에 대해 걱정할 필요가 없습니다. 이는 잠재적으로 다음과 같이 보일 것입니다 (추가 레이어에주의).

<div id="insert_the_el_in_here">  <!-- this is all that's in the original HTML doc -->
    <div id="the_el">  <!-- i used to be a backbone generated, unattached el but have been rendered and inserted -->
        <!-- we're finally getting to some useful stuff in here -->
    </div>
 </div>

그래서 내 두 번째 질문의 일부는 기본적으로 정적 뷰의 경우 페이지의 HTML에서 기존 요소를 내 뷰로 직접 사용하는 데 문제가 el있습니까? 이렇게하면 이미 DOM이 올바른 위치에 있음을 알 수 있으며 렌더링을 호출하면 페이지에서 뷰가 즉시 렌더링됩니다. 나는 이미 존재하는 요소를 내 뷰의 해석자에게 'el'로 전달함으로써 이것을 달성 할 것이다. 그런 식으로, 나는 그것을 DOM에 집어 넣는 것에 대해 걱정할 필요가 없으며 (질문 1 종류의 논쟁을 일으킴) render를 호출하면 즉시 DOM이 업데이트됩니다. 예

<form>
   <div someOtherStuff>
   </div>
   <span id="myView">
   </span>
</form>

<script type="text/template" id = "myViewContents"> . . . </script>

<script type="application/javascript">
window.MyView = Backbone.View.extend( {
     initialize: function () {
          this.template = _.template($('#myViewContents').html());
          this.render(); 
     },
     render: function () {
          $(this.el).html(this.template());
          return this;
     }
});
$(function () {
    window.myView = new MyView({ el: $('#myView').get(0) });
});
</script>

페이지의 정적보기에 대해이 작업을 수행하는 데 적합한 방법입니까? 즉, 이러한보기 중 하나만 있으며 어떤 상황에서도 사라지지 않습니다. 아니면 더 좋은 방법이 있습니까? 보기를 사용하는 방법에 따라 작업을 수행하는 방법 (예 : 라우터, 상위보기, 페이지로드 등)이 다를 수 있음을 알고 있지만 지금은 초기 페이지로드를보고 있습니다. 사용 사례.

감사

---

뷰를 기존 DOM 노드에 연결한다는 생각에는 전혀 문제가 없습니다.

el을 속성으로보기에 넣을 수도 있습니다.

window.MyView = Backbone.View.extend( {
     el: '#myView',
     initialize: function () {
          this.template = _.template($('#myViewContents').html());
          this.render(); 
     },
     render: function () {
          this.$el.html(this.template()); // this.$el is a jQuery wrapped el var
          return this;
     }
});
$(function () {
    window.myView = new MyView();
});

제가 추천하는 것은, 효과가있는 일을하는 것입니다. Backbone의 장점은 유연하고 귀하의 요구를 충족 할 수 있다는 것입니다.

일반적인 패턴에 관한 한 일반적으로 오버뷰를 추적 할 메인 뷰가 있고 목록 뷰와 개별 항목 뷰가있을 수 있습니다.

Another common pattern as far as initialization is concerned is to have some sort of App object to manage stuff...

var App = (function ($, Backbone, global) {
    var init = function () {
        global.myView = new myView();
    };

    return {
        init: init
    };
}(jQuery, Backbone, window));

$(function () {
    App.init();
});

Like I said before though, there's really no WRONG way of doing things, just do what works. :)

Feel free to hit me up on twitter @jcreamer898 if you need any more help, also check out @derickbailey, he's kind of a BB guru.

Have fun!

---

You can also send an HTML DOM Element object into the view as the 'el' property of the options.

window.MyView = Backbone.View.extend( {
     initialize: function () {
          this.template = _.template($('#myViewContents').html());
          this.render(); 
     },
     render: function () {
          this.$el.html(this.template()); // this.$el is a jQuery wrapped el var
          return this;
     }
});
$(function () {
    window.myView = new MyView({
        el: document.getElementById('myView')
    });
});

---

Use delegate events method:

initialize: function() {
    this.delegateEvents();
}

To understand why: http://backbonejs.org/docs/backbone.html#section-138 near "Set callbacks, where"

---

Looks also like these days you can youse setElement.

참고URL : https://stackoverflow.com/questions/10746706/attaching-backbone-js-views-to-existing-elements-vs-inserting-el-into-the-dom