밑줄 템플릿 루프, 루프 없음?

Question

이런 종류의 질문은 제가 물어 본 또 다른 질문에서 나온 것입니다.하지만 내가 생각하는 사람은 다른 것을 설명하려고 시도했거나 내 자신의 권리를 설명하지 않았을 가능성이 큽니다.

그래서 모든 백본 코드가 작동하고 출력 권한 데이터가 표시됩니다. 이제 내 테스트 데이터를 설명하기 위해 17 열의 입력이 있었지만 _.each 루프를 만들지 않고도 약 17 번 반복되었는데 이유는 알 수 없습니다.

그래서 내 백본 코드,

var TimeSheetModel = Backbone.Model.extend({ 
    defaults: { 
     Timesheetrow: "", 

    } 
}); //End of Timesheet Model 

var TimeSheetCollection = Backbone.Collection.extend({ 
    model: TimeSheetModel, 
    url: '/dashboard/jsondata/' + TimesheetID() 
}); //End of Timesheet Collection 

var TimeSheetView = Backbone.View.extend({ 
    el:'#testarea', //HTML loading area for the data 

    template: _.template($('#TimesheetData').html()), //Template to load the JSON data into 

    initialize: function(){ 
     var NewTimeSheetCollection = new TimeSheetCollection(); //New Instance Of Collecttion 
     this.listenTo(NewTimeSheetCollection, "add", this.AddMyModel); 
     NewTimeSheetCollection.fetch(); 
    }, 

    AddMyModel: function(TimeSheetModel) { //apply model data to view template and append to view element 
     this.$el.append(this.template(TimeSheetModel.toJSON())); 
     //$(this.el).html(this.template(TimeSheetRowModel.toJSON())); 
    } 
}); //End of Timesheet View 

//New Instance & render call for the set Timesheet View. 
NewTimeSheetVew = new TimeSheetView(); 
//NewTimeSheetVew.render(); <- do I need this? seems to work, without it? 

}); 

그리고 내 밑줄 템플릿 코드는

<script type="text/template" id="TimesheetData"> 

<% console.log(Timesheetrow) %> 

<% _(1).times(function(n){ n=2; }); //just a test bit of code %> 


<% if(Timesheetrow.jobtitle) { %> 

    <form action="#" method="post" id="TimesheetDataList"> 

     <div class="TimesheetRowData"> 
      <input type="hidden" name="data[Timesheetrow][0][id]" value="<%= Timesheetrow.id %>"> 
      <input type="type" name="data[Timesheetrow][0][jobtitle]" value="<%= Timesheetrow.jobtitle %>"> 
     </div> 

    </form> 

<% }; %> 

</script> 

나의 목표는 17 배 주위 루프, 하나의 마스터 양식을 가지고, 백본을 사용하는 것입니다 (또는 X, 사용자 지정 행에 따라 다름). 따라서, 예를 들어, 나는 같은 출력 할 것이다 :

<form id="ID-HERE"> 
     <div><input value="XXXXX"></div> 
     <div><input value="XXXXX"></div> 
     <div><input value="XXXXX"></div> 
     <div><input value="XXXXX"></div> 
     <div><input value="XXXXX"></div> 
</form> 

하지만 내가 얻고있다 즉 17 번 루프, 그래서 자신의 폼 태그로 각각의 입력을, 그래서 나는 현재 나의 페이지 (17 개) 형태를 가지고있다.

모든 도움을 환영합니다.

내가 직접 설명하지 않았 으면 알려주세요. 난 실독증이있어서 제 철자법, 문법이 약간 어색 할 수도 있습니다.

감사합니다,

Answer 1

당신은 서버에서 검색 각 모델의 가져 오기 작업 후에 해고 될 것입니다 컬렉션에 추가 이벤트를 듣고 있습니다 :

this.listenTo(NewTimeSheetCollection, "add", this.AddMyModel); 
NewTimeSheetCollection.fetch(); 

그래서 서버가 17을 반환 추가 이벤트가 17 번 발생하고 AddMyModel 함수가 템플릿을 렌더링 할 때마다 추가 이벤트가 발생합니다. (documentation을보고있는 경우 가져 오기에서는 내부적으로 추가 이벤트를 발생시키는 set 메소드를 사용합니다.

문제는 각 모델을 렌더링하는 데 사용하는 템플릿에 양식 태그가 포함되어 있으므로 모든 모델에 대해 반복해서는 안됩니다.

• 업데이트 모델의 배열을 렌더링하는 템플릿, 수동 루프 :

  당신은 기본적으로 한 번 렌더링하는 무슨 분할 및 각 모델 렌더링 할 수 있으며,이 고정 몇 가지 방법이 템플릿 안쪽. 콜렉션의 add 이벤트를 수신하지 않고 fetch 메소드에 성공 콜백을 전달하십시오. 여기서 fetch 메소드는 템플릿에 모델 배열을 전달합니다.

• 템플릿을 2로 분할하십시오 : 양식 루프가있는 마스터 하나와 TimesheetRow의 입력이있는 자식 하나를 분리하십시오. 뷰 초기화시 마스터 템플릿을 렌더링하고 컬렉션 추가 이벤트를 계속 수신합니다. AddMyModel에서 하위 템플릿을 렌더링하고 폼에 추가합니다.

• 보기를 마스터보기와 하위보기로 나눕니다. 마스터 뷰는 양식을 렌더링하고 콜렉션을 가져 와서 이벤트를 추가합니다. 추가 된 모든 모델에 대해 자식 뷰의 새 인스턴스를 만들어 추가 된 모델에 전달하고 양식을 렌더링 한 다음 el을 양식에 추가합니다.

---

나는 세 번째 옵션으로 jsfiddle 만든

편집 할 수 있습니다. 2 개보기 TimeSheetRowView 및 TimeSheetCollectionView 있습니다

var TimeSheetRowView = Backbone.View.extend({ 
    className:'TimesheetRowData', 
    template: _.template($('#TimesheetData').html()), 
    render: function() { 
     this.$el.append(this.template(this.model.toJSON())); 
     return this.$el; 
    } 
}); 

var TimeSheetCollectionView = Backbone.View.extend({ 
    el:'#MasterContainer', 
    template: _.template($('#TimesheetForm').html()), 
    initialize: function(){ 
     //render master template 
     this.$el.append(this.template()); 
     //keep element so we insert child views before it, inside the form 
     this.submitButton = this.$(".actionSubmit"); 
     //initialize collection and listen to events 
     this.collection = new TimeSheetCollection(); 
     this.listenTo(this.collection, "add", this.AddTimesheetRow); 

     //simulate a fetch just setting the models 
     var hardcodedModels = [{Timesheetrow: {id: 1, index: 0, jobtitle: 'Foo'}}, 
           {Timesheetrow: {id: 2, index: 1, jobtitle: 'Bar'}}]; 
     this.collection.set(hardcodedModels); 
    }, 
    AddTimesheetRow: function(model) { 
     //render a single row view and insert it inside the form, right before the submit button 
     var view = new TimeSheetRowView({model: model}); 
     //view.render() returns its $el so we can chain the insertBefore method 
     view.render().insertBefore(this.submitButton); 
    } 
}); 

그리고 템플릿으로 나누어되었습니다 다니엘-J-g, 많은 감사합니다, 아주 좋은 대답 @

<script type="text/template" id="TimesheetForm"> 
    <form action="#" method="post" id="TimesheetDataList"> 
     <input type="submit" class="actionSubmit" value="Send"/> 
    </form> 
</script> 

<script type="text/template" id="TimesheetData">  
    <input type="hidden" name="data[Timesheetrow][<%= Timesheetrow.index %>][id]" value="<%= Timesheetrow.id %>"> 
    <input type="type" name="data[Timesheetrow][<%= Timesheetrow.index %>][jobtitle]" value="<%= Timesheetrow.jobtitle %>">   
</script>