Backbone/Marionette보기 인스턴스를 사용할 때 동일한 ID를 가진 여러 DOM 요소를 피할 수 있습니까?

Question

ID가있는 템플릿 html로 링크 된 마리오네트 뷰의 다중 뷰 인스턴스를 만들면 이러한 뷰의 여러 인스턴스에 대해 복제됩니다.

올바르게 작동하는 동안 구조적으로 올바른 방법을 사용해야한다고 생각합니다.

예제 코드는 아래와 같습니다.

Template: 
<script id="myTemplate" type="text/template"> 
    <div id="myDiv"> 
     <input type="text" id="myText"/> 
     <input type="button" id="myBtn" value="Click me!"/> 
    </div> 
</script> 
View: 
MyView = Backbone.Marionette.ItemView.extend({ 
    template: '#myTemplate', 
    events: { 
     'click #myBtn' : 'myFunc'  //Correctly identifies its own 'myBtn' 
    }, 
    myFunc : function() { 
     alert($('myText').val());  //Again, picks own 'myText' 
    } 
}); 
var v1= new MyView(); 
v1.render(); 
var v2= new MyView(); 
v2.render();  //Duplicate IDs now present in DOM 

DOM 요소와 ID가 고유해야합니다. 모델을이보기에 연결하는 경우에도 이러한 DOM 요소를 식별 할 수있는 방법이 필요합니다.

ID를 복제하지 않고이를 수행하는 올바른 방법은 무엇입니까? 당신이

var v1= new MyView({ id: "view" + number}); 
v1.render(); 

다음 :

템플릿 :

<script id="myTemplate" type="text/template"> 
    <input type="text" class="js-myText"/> 
    <input type="button" class="js-myBtn" value="Click me!"/> 
</script> 

보기 정의 :

MyView = Backbone.Marionette.ItemView.extend({ 
    template: '#myTemplate', 
    events: { 
     'click #myBtn' : 'myFunc'  //Correctly identifies its own 'myBtn' 
    }, 
    myFunc : function() { 
     alert($('myText').val());  //Again, picks own 'myText' 
    } 
}); 

Instanciation을 만들 때

Answer 1

, 당신은 사용할 수 있습니다

이

1. 밑줄의 uniqueId 방법은 내부의 각 DOM 요소에 대한 고유 ID를 생성하는 보기 : <input type="text" id= <%= _.uniqueId("myText_") %> /> 이것은 ID가 중복되지 않도록합니다. 그러나 이러한 ID로 요소를 식별해야하는 경우에는별로 도움이되지 않습니다.

2. 마리오네트의 당신은 템플릿 내부에서 도우미 기능을 사용할 수 있도록 TemplateHelpers :

   //Define this inside your view: 
       templateHelpers: function() { 
        var that = this; 
        return { 
        getIdSuffix : function() { return that.idSuffix; } 
         /*Where idSuffix is passed to the view during instantiation 
          and assigned to this.idSuffix */ 
        }; 
       } 
   
   //In the template: 
       <input type="text" id= <%= "myText_" + getIdSuffix() %> /> 
   

이 는 이제 DOM ID를 당신이 무슨 실행하기 전에 알아야

는, 치료가 동일하게 제공하지 않도록 제공한다

idSuffix를 2 개 이상의 뷰 인스턴스에 건네줍니다.

Answer 2

는 그냥보기로 ID를 전달 동적 인 01을 제공 할 수있다. 조회수 값(예 : 모델 ID를 사용하여).

그렇다면 마리오넷을 사용할 때 render으로 전화 할 필요가 없습니다. 지역 내에서 show보기를 사용해야합니다. 내 Marionette book에 free sample을 보시면 속도를 높일 수 있습니다. 당신이 아무도 실수로보기를 내부 클래스 이름을 중복 없는지 확인하는 고유 ID를 위해 이동해야하는 경우

Answer 3

간단히 말해서 고유하지 않은 경우 id을 사용하지 마십시오. 클래스를 사용하거나 요소를 식별하는 다른 방법을 사용하십시오.

당신은 미친 취성에 이르기까지, 당신이 원하는 요소를 찾을 수있는 jQuery를 선택기를 사용할 수 있습니다

this.$('div > input:first'); // don't actually do this!

을 의미 더 느리지 만에 :

this.$('[data-element-type="some-text-box-descriptive-name"]');

하지만 실제로는 클래스를 사용하는 것이 가장 좋습니다. 클래스가 요소이기 때문에 요소의 유형을 식별하기 때문입니다. (이 경우) 나는 테이너가 템플릿에서 클래스를 변경하지 모를 수도 있음을 볼 수있다, 그래서 데이터 속성도 어쩌면 허용, 또는 수 있습니다 :

this.$('input[type=text]');