backbone.js가있는 밑줄 템플릿 사용

Question

backbone.js 및 underscore.js를 사용하여 페이지를 만들려고합니다. 페이지에 버튼이 있으면 그 버튼을 누르면 내가 정의한 템플릿을 사용하여 페이지의 빈 태그에 양식의 내용을 추가합니다. 양식 데이터가 어디로 가야

<div id="playView"></div> 
<input type="button" id="addQuestion" value="Add Question" /> 

가 여기 내 템플릿입니다 :

는 여기에 버튼을 누른 후 템플릿 물건이 가고 싶은 내 빈 태그의

<script id="viewTemplate" type="text/template"> 
    <div id="stemView">{{ Stem }}</div> 
    <label for="answer1"> a)</label><div>{{ answer1View }}</div> 
    <label for="answer2"> b)</label><div>{{ answer2View }}</div> 
    <label for="answer3"> c)</label><div>{{ answer3View }}</div> 
    <label for="answer4"> d)</label><div>{{ answer4View }}</div> 
</script> 

을 그리고 여기 폼의 사용자가 작성해야 할 내용은 다음과 같습니다.

<form> 
    <textarea id="stem"><textarea> 
    <textarea id="answer1"></textarea> 
    <textarea id="answer2"></textarea> 
    <textarea id="answer3"></textarea> 
    <textarea id="answer4"></textarea> 
</form> 

여기에는 관련 backbone.js 코드가 나와 있습니다. 제 질문은, 제가이 행사에서 무엇을합니까? 양식에서 데이터를 가져온 다음 viewTemplate으로 가져온 다음 비어있는 div 태그 (playView)에 어떻게 가져 옵니까?

wizard.PlayView = Backbone.View.extend({ 
    initialize: function() { 
     this.model.bind('change', _.bind(this.render, this)); 
    }, 
    el: '#playView', 

    events: { 
     'click button#addQuestion': 'addQuestion' 
    } 
    addQuestion: function() { 
     $(this.el).append(); 
    } 
}); 

Answer 1

, 당신은 지금이 설정을 가지고있는 식으로, 당신은

events: { 
     'click button#addQuestion': 'addQuestion' 
    } 

를 트리거 할 수 없습니다. 따라서이 문제를 해결하려면 검은 뼈 템플릿이 페이지의 단추를 렌더링 한 다음 단추를 클릭하는 소리를 듣습니다. 버튼을 클릭하면, 당신은 HTML 페이지에 포함되어있는 (질문 템플릿을로드하고 현재의 백본 템플릿에 그것을 삽입합니다.

<script id="viewTemplate" type="text/template"> 
    <div id="stemView">{{ Stem }}</div> 
    <label for="answer1"> a)</label><div>{{ answer1View }}</div> 
    <label for="answer2"> b)</label><div>{{ answer2View }}</div> 
    <label for="answer3"> c)</label><div>{{ answer3View }}</div> 
    <label for="answer4"> d)</label><div>{{ answer4View }}</div> 
</script> 

<script id="mainTemplate" type="text/template"> 
    <input type="button" id="addQuestion" value="Add Question" /> 
</script> 


wizard.PlayView = Backbone.View.extend({ 
    initialize: function() { 
     this.model.bind('change', _.bind(this.render, this)); 
    }, 

el: '#playView', 

template : _.template($('#mainTemplate').html()) 

events: { 
    'click button#addQuestion': 'addQuestion' 
} 

addQuestion: function() { 
    var t = _.template($('#stemTemplate').html(); 
    $(this.el).append(t(this.model.toJSON())); 
} 

render: function() { 
      $(this.el).append(this.template(this.model.toJSON())); 
     } 

}); 

Answer 2

먼저 데이터가 포함 된 모델을 작성하십시오.

그런 다음 내부보기, 당신은 당신이 컴파일 된 템플릿과 함께 모델에 통과 할 뷰의 렌더링 안에 그런 다음 템플릿을

wizard.PlayView = Backbone.View.extend({ 
     template : _.template($('#viewTemplate').html()) 
     initialize: function() { 
     // Use listenTo to bind events instead of directly 
     // listening on the model 
      this.listenTo(this.model, 'change', this.render); 
     }, 
     events: { 
      'click .addQuestion': 'addQuestion' 
     }, 
     addQuestion: function(e) { 
      var $target = $(e.target); 
      // Your logic here 
     }, 
     render: function() { 
      $(this.el).append(this.template(this.model.toJSON())); 
     } 

를 컴파일 할

사용 _.template 먼저 템플릿을 컴파일 할 것 모델 내부의 데이터로 채워질 것입니다. 내가 제대로 이해하고있는 경우 입력 태그는 백본 템플릿에 있어야하기 때문에