마리오네트 이벤트 처리기에서 요소를 선택하려면 어떻게해야합니까?

Question

편집 : 추가 더 많은 코드는이 같은 내 모델에 이벤트를 듣고있어

는 :

<td class="cusername">{{username}}</td> 
<td class="highscore"> 

<div class="box"> 
    <button class="send"></button> 
     <span>Send</span> 
    </button> 
</div> 

:

var view = Marionette.ItemView.extend({ 

    tagName: 'tr', 
    template: viewtemplate, 

    modelEvents: { 
     "change:highscore": "highchange" 
    }, 

    highchange: function (model) { 
     var elem = this.$('.send'); 
     console.log(elem); 
     elem.hide(); 
     this.render(); 
    } 
}); 

그리고 내 템플릿 (이것은 내 생각이다)

(내 Marionette.ItemView.extend ({...});) 내에 있습니다
내 모델이 최고 점수를 변경할 때 t 그는 숨겨진 요소를 보내지 만 위의 경우 아무것도 수행하지 않습니다. console.log (elem)은 엘리먼트를 올바른 엘리먼트 인 객체 [div.send]로 제공하지만 숨겨진 것은 아닙니다.

이 점은 꼭두각시의 수명주기와 관련이 있습니까? 모델의 이벤트 결과로 숨겨진 요소를 변경하려면 어떻게해야합니까?

Answer 1

이보기 컨텍스트 내에 '보내기'클래스가있는 요소가 두 개 있습니까? 그렇다면 대상 요소와 관련하여 모호성을 제거하면됩니다. 당신이 이벤트 자체의 대상 및 조작 할 요소 사이의 관계를 이해한다면, 당신은 그런 식으로 액세스 할 수 있습니다 요소를 한 후 다시 쓰게 전체보기가 숨어 있기 때문에

highchange: function (e) { 
    var elem = $(e.target).find('.send'); // if .send is a child element 
    var elem = $(e.target).closest('.send'); // if .send is a parent element 
} 

Answer 2

그것은 발생합니다. render 함수를 호출 한 후 요소를 숨길 수 있습니다. 렌더링이 매우 비쌉니다. 수동으로 화면을 새로 고침하는 것이 좋습니다.

var View = Marionette.ItemView.extend({ 

    tagName: 'tr', 

    template: viewtemplate, 

    ui: { 
     $username: '.username', 
     $send: '.send' 
    }, 

    modelEvents: { 
     'change': 'onChangeModel' 
    }, 

    onChangeModel: function (model) { 
     if (model.hasChanged('highscore')) this.ui.$send.hide(); 

     if (model.hasChanged('username')) this.ui.$username.text(model.get('username'));   
    } 
});