Question

So I’m using backbone.js to take multiple entries at once for a certain bit of data. This data will form a timetable ultimately. What I need to do now is figure out how to constantly check three data fields entered into one itemview, are repeated in another.

Here is the code

<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>

---

Here is the backbone code

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();
});

So this code is take a number of classes and the session, the room and the day of the week.

My validation needs to ensure that No two classes are chosen for the same session on the same day in the same session.

How would I go about setting up events or whatever I would use, to see what data was selected in the previous itemview?

Answer 1

I decided not to attempt the validation in the client side, but in the code behind. In the controller, i checked the incoming list for any such clashes and returned an error notification to the form if any such class was found. Works well enough. I am working towards highlighting the clashed items.