2013-06-11 2 views
0

백본 하위보기/모듈/플러그인을 추가하고 다른 사용자가 렌더링 한 마크 업에 바인딩 할 수 있어야하는 콘텐츠 편집을위한 동적 양식을 개발 중입니다. 전망. 이 메인 폼/뷰의 특별한 점은 제 3 자 개발자로서이 뷰를 변경할 수 없다는 것입니다. 따라서 메인 뷰가로드 될 때만 백본의 하위 뷰 인스턴스를 생성하기위한 로딩 메커니즘이 필요합니다. . 내가하고 싶은 것을 보여주는 작은 피들을 만들었고,이 예제에서 체크 박스가 포함 된 뷰는 에디터 뷰가로드 될 때를 인식해야만 인스턴스를 생성하고 올바른 엘에 바인딩 할 수 있습니다. 여기 부모보기가로드 될 때를 알고있는 백본 하위보기/플러그인

<div id="container"> 
    <button>Load</button> 
</div> 
<script id="tpl-main-view" type="text/template"> 
    <form> 
     <fieldset> 
      <legend>Edit</legend> 
      <label>Name:</label> 
      <input type="text" /> 
      <br /> 

      <!-- Sub module start --> 
      <div id="sub-view"> 
       <label>Published</label> 
       <input type="checkbox" /> 
      </div> 
      <!-- Sub module end --> 

     </fieldset> 
    </form> 
</script> 

Fiddle here

이 가능한 답을 내 질문에 업데이트 된 내 바이올린에 사용하고 html로 내가

// This code cannot be altered by the developer who's creating the module/plugin 
var EditorView = Backbone.View.extend({ 
    template:_.template($('#tpl-main-view').html()), 

    initialize: function() { 
    }, 

    render: function (eventName) { 
     var html = this.template(); 
     $(this.el).html(html); 
     return this; 
    } 

}); 

// This module/plugin needs to be aware of when the editor view is loaded 
var SubModule = Backbone.View.extend({ 
    events: { 
     'click input[type=checkbox]' : 'publish' 
    }, 
    publish: function() { 
     alert('publish...'); 
    } 
}); 

var Container = Backbone.View.extend({ 
    events: { 
     'click button' : 'loadView' 
    }, 
    loadView: function() { 
     var view = new EditorView(); 
     $('body').append(view.render().el); 
    } 
}); 

var main = new Container({el: $('#container')}); 

var module = new SubModule({el: $('#sub-view')}); 

을 사용하고 스크립트입니다 만 이게 최선의 해결 방법인지 나는 모른다. require js 또는 이와 유사한 것을 사용하여 이것을 해결할 수 있습니까? Dojo에는 다른 뷰가로드 될 때 어떤 결정 방법이 있다고 생각합니다.

가능한 해결 방법 : EditorView이 변경 될 수 없습니다 그러나 당신의 바이올린은 당신이 다음 접근 방식이 작동해야 EditorView에 이벤트를 추가 할 수있는 경우, 변경 이벤트를 청취 EditorView에 대한 코드를 수정 포함 언급 http://jsfiddle.net/9phHk/1/

답변

0

. EditorView를 수정하지 않고 keyup 이벤트를 수신하는 방법을 원할 경우 다음을 시도해보십시오.

관련 문제