2012-03-06 2 views
1

그래서 특정 데이터 비트에 대해 여러 항목을 한꺼번에 가져 오는 데 backbone.js를 사용하고 있습니다. 이 데이터는 궁극적으로 시간표를 형성합니다. 지금해야 할 일은 한 itemview에 입력 된 세 개의 데이터 필드를 지속적으로 확인하는 방법을 알아내는 것입니다. 여기 Backbone.js의 유효성 확인

<div class="grid_16 lb-bg"> <div class="clearfix form-box bot-p bot-m"> 
<div > 
<label for="ClassTimes[{{ count }}].ClassId">Class</label> <br/> 
<select id="ClassTimes[{{ count }}].ClassId" name="ClassTimes[{{ count }}].ClassId" class="ClassList" style="Width: 20%"> 
    @foreach (var c in Model.Classes) 
    { 
     <option value="@c.Value">@c.Text</option> 
    } 
</select> 
</div> 
<div > 
<label for="ClassTimes[{{ count }}].RoomId">Room</label> <br/> 
<select id="ClassTimes[{{ count }}].RoomId" name="ClassTimes[{{ count }}].RoomId" style="Width: 20%"> 
    @foreach (var c in Model.Rooms) 
    { 
     <option value="@c.Value">@c.Text</option> 
    } 
</select> 
</div> 
<div > 
<label for="ClassTimes[{{ count }}].SessionId">Class Session</label> <br/> 
<select id="ClassTimes[{{ count }}].SessionId" name="ClassTimes[{{ count }}].SessionId" class="SessionList MakeWide" style="Width: 20%"> 
    @foreach (var c in Model.Sessions) 
    { 
     <option value="@c.Value">@c.Text</option> 
    } 
</select> 
</div> 
<div > 
<label for="ClassTimes[{{ count }}].DayId">Day</label> <br/> 
<select id="ClassTimes[{{ count }}].DayId" name="ClassTimes[{{ count }}].DayId" class="MakeWide" style="Width: 20%"> 
    @foreach (var c in Model.Days) 
    { 
     <option value="@c.Value">@c.Text</option> 
    } 
</select> 
</div> 


다음

window.CreateAssign = (function() { 
    var CreateAssign = {}; 

    var subs = new Array(); 
    //The next of kin item list view 
    AssignItemView = Backbone.View.extend({ 
     tagName: 'div', 
     initialize: function() { 
      //bindall 
      _.bindAll(this, 'render'); 

      this.template = _.template($('#SFTemplate').html()); 

      this.render(); 
     }, 
     render: function() { 
      $(this.el).html(this.template({ 
       count: subs.length 
      })).fadeIn(); 
      return this; 
     } 

     , 
     remove: function() { 
      $(this.el).fadeOut('fast', function() { 
       $(this).remove(); 
      }); 
      return false; 
     } 
    }); 

    function subUpdated() { 
     if (subs.length > 0) { 
      $('#removeassign').fadeIn(); 
     } 
     else { 
      $('#removeassign').fadeOut(); 
     } 
    } 

    CreateAssign.Init = function() { 
     $('#addassign').click(function() { 
      var item = new AssignItemView(); 
      subs.push(item); 
      $('#classlist').prepend($(item.el).fadeIn('fast')); 
      subUpdated(); 
      return false; 
     }); 

     $('#removeassign').click(function() { 
      if (subs.length > 0) { 
       subs.pop().remove(); 
      } 
      subUpdated(); 
      return false; 
     }); 
    }; 
    return CreateAssign; 
})(this, this.document); 

$(function() { 
    CreateAssign.Init(); 
}); 

그래서이 코드는 클래스의 수와 세션을 가지고있는 백본 코드를 인 코드를입니다 , r 주와 요일.

동일한 세션에서 같은 날 동일한 세션에 대해 두 개의 클래스를 선택하지 않아야합니다.

이전 항목보기에서 어떤 데이터가 선택되었는지 보려면 이벤트를 설정하거나 사용할 항목을 어떻게 설정해야합니까?

+0

은 'ClassTimes' 백본 컬렉션입니까? 그것은 배열 인 것처럼 보입니다. 'ClassTimes' 백본 모델의 요소입니까? 나는 당신이'model.escape ("RoomId")' – timDunham

답변

0

클라이언트 측에서 유효성 검사를 시도하지 않기로 결정했지만 코드는 뒤에 있습니다. 컨트롤러에서 들어오는 목록에 그러한 충돌이 있는지 검사하고 그러한 클래스가 발견되면 오류 알림을 양식에 반환했습니다. 충분히 잘 작동합니다. 나는 충돌 한 항목을 강조하기 위해 노력하고 있습니다.

1

당신의 백본 공동체를 보지 않고 말하기는 어렵지만, 모델에 대한 검증을 원한다면 내 소프트웨어를 실망 시키십시오. : Backbone.Validator.

모델에 일반적인 유효성 검사를 추가하고 유효성 검사가 실패 할 경우 기본값을 구현할 수있는 Backbone.Model 클래스의 믹스입니다 (error 메시지를 유발 함).

유효성 검증과 결합 된 두 뷰에 동일한 모델을 사용할 수 있으며 두 모델 모두에서 값을 사용할 수 있고 유효성을 확인할 수 있습니다.