Backbone.js와 함께 콧수염을 사용할 때 이벤트가 작동하지 않습니다.

그래서 RequireJs, Mustache 및 Backbone.js를 사용하여 테스트 응용 프로그램을 만들고 있습니다. Mustache 템플릿을 사용하여 모델 컬렉션을 렌더링하는 데 약간의 성공을 거두었습니다. 그러나 내 콧수염 서식 파일에는 단추가 있으며보기의 단추에 클릭 이벤트를 바인딩하려고하면 단추를 클릭해도 콜백 함수가 호출되지 않습니다. 나는 정말로 붙어있다, 누군가 내가 올바르게하지 않고있는 곳을 나에게 말할 수 있냐?Backbone.js와 함께 콧수염을 사용할 때 이벤트가 작동하지 않습니다.

ItemView.js : 여기

내 코드입니다

define(['jquery', 'backbone', 'underscore', 'mustache', '../../atm/model/item'], function ($, Backbone, _, Mustache, Item) { 

var ItemView = Backbone.View.extend({   
    initialize: function() { 
    }, 

    tagName: 'li', 

    events: { 
     'click .button': 'showPriceChange' 
    }, 

    render: function() { 
     var template = $('#template-atm').html(); 
     var itemObj = this.model.toJSON(); 
     itemObj['cid'] = this.model.cid; 

     var rendering = Mustache.to_html(template, itemObj); 
     this.el = rendering; 

     return this; 
    }, 

    showPriceChange: function(event) { 
     alert('Changing...'); 
     $('#' + elemId).empty(); 
     $('#' + elemId).append(document.createTextNode('Changed')); 
    },  
}); 

return ItemView; 
});

atm.html :

<!DOCTYPE html> 
<html> 
<head> 
    <title>Elevator</title> 
    <script data-main="scripts/main" src="scripts/require-jquery.js"></script> 
    <style type="text/css"> 

    </style> 
</head> 

<body> 
    <h1>Vending Machine</h1> 
    <div id="atm-items"> 
    </div> 

    <script id="template-atm" type="html/template"> 
     <li> 
      <p>Item: {{name}}</p> 
      <label for="price-{{cid}}">Price:</label> 
      <input id="price-{{cid}}" type="text" value="{{price}}"/> 
      <button class="button">Change</button> 
      <p id="status-{{name}}-{{cid}}">- -</p> 
     </li> 
    </script> 
</body> 
</html>

출처

2012-06-19 DaHoopster

나는 버튼을 클릭하면 게시/제출한다고 생각합니다. 단추의 기본값입니다. 그것을 위해'type = "button"'을 추가하고 무슨 일이 일어 났는지 말해 보아라. – Deeptechtons

No go :-(버튼 요소를 으로 변경했지만 여전히 이벤트가 없습니다. – DaHoopster

당신이 대체하고있는 뷰의 elrender 내부 :

render: function() { 
    //... 
    this.el = rendering; 
    //... 
}

그렇게하면, this.el에 연결된 jQuery delegate을 잃어 버리면, delegate 핸들러 (Backbone이 추가)가 이벤트 라우팅을 담당하게됩니다.

일반적으로, 당신은 this.el보다는 이this.el 교체에 일을 추가 . 템플릿이처럼 보였다 경우

다음
<script id="template-atm" type="html/template"> <p>Item: {{name}}</p> <label for="price-{{cid}}">Price:</label> <input id="price-{{cid}}" type="text" value="{{price}}"/> <button class="button">Change</button> <p id="status-{{name}}-{{cid}}">- -</p> </script>

당신의 this.$el.append(rendering) 것보기의 render; 보기의 tagName을 li (으)로 설정 했으므로 을 this.el에 표시합니다. 당신이 정말로 템플릿의 <li>을 유지해야하는 경우

또는, 당신은 this.el, this.$el을 대체 할 setElement를 사용, 이벤트 위임을 돌볼 수 : 아마도

this.setElement(rendering);

이 모든 포장하고 <ul>, <ol>, or <menu>의 <li> s 다른 위치; 만약 당신이 잘못된 HTML을 만들어 내고 있지 않고 브라우저가 그것을 바로 잡으려고한다면, HTML 구조가 선택자의 생각과 다를 수 있으므로 수정하면 문제가 발생할 수 있습니다.

출처

2012-06-19 19:39:48

스폿을 켜면 setElement를 사용한 후 이벤트가 올바르게 트리거됩니다. 내가 설명서를 조금 혼란에 엘과 setElement 것 같아요. 감사합니다 !! – DaHoopster

Backbone.js와 함께 콧수염을 사용할 때 이벤트가 작동하지 않습니다.

답변

관련 문제