Question

I am currently working on a data input form that will take as in input some time parameters. As a result, I desire to use a jquery timepicker in these fields, within the itemview. This is my first time attempting to interact with the internal elements of an itemview and assistance would be greatly appreciated.

This is what i have attempted so far.

 <div class="grid_15 top-m">
        <div class="grid_16"><h3>Class Sessions</h3> <i>(eg. Period 1, Period 2 etc)</i></div>
        <div class="grid_16">
        <div id="sessionlist"></div>
        <br/><br/>
        </div>
        <div>
        <a id="addses" class="top-m" href="#">Add</a>
        <a id="removeses" class="top-m" href="#" style="display:none" >Remove</a>
        </div>
    </div>

The add and remove buttons remove and add itemviews as desired.

 <script type="text/html" id="SFTemplate">

<div class="editor-label">
<label for="Sessions[{{ count }}].Name">Session Name</label>
</div>
<div class="editor-field">
<input type="textbox" id="Sessions[{{ count }}].Name" name="Sessions[{{ count }}].Name"/>
</div>

<div class="editor-label">
<label for="Sessions[{{ count }}].StatTime">Session Start Time</label>    
</div>
<div class="editor-field">
 <input type="textbox" id="Sessions[{{ count }}].StartTime" name="Sessions[{{ count }}].StartTime"/>
</div>

<div class="editor-label">
<label for="Sessions[{{ count }}].EndTime">Session End Time</label>    
</div>
<div class="editor-field">
 <input type="textbox" id="Sessions[{{ count }}].EndTime" name="Sessions[{{ count }}].EndTime"/>
</div>

That is the template for the itemview

<script>
window.CreateSession = (function () {
    var CreateSession = {};

    var ses = new Array();
    //The next of kin item list view
    SessionItemView = 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: ses.length
            })).fadeIn();
            return this;
        },
        remove: function () {
            $(this.el).fadeOut('fast', function () {
                $(this).remove();
            });
            return false;
        },

        **events: {
            "click input[type=textbox]": "placetimepicker"
        },
        placetimepicker: function (e) {
            e.el.timepicker({ ampm: true,
                    hourMin: 8,
                    hourMax: 16
                });**
        }
    });

    function sesUpdated() {
        if (ses.length > 0) {
            $('#removeses').fadeIn();
        }
        else {
            $('#removeses').fadeOut();
        }
    }

    CreateSession.Init = function () {
        $('#addses').click(function () {
            var item = new SessionItemView();
            ses.push(item);
            $('#sessionlist').append($(item.el).fadeIn('fast'));

            sesUpdated();
            return false;
        });
        $('#removeses').click(function () {
            if (ses.length > 0) {
                ses.pop().remove();
            }
            sesUpdated();
            return false;
        });
    };
    return CreateSession;
})(this, this.document);


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

Answer 1

After more research and trial and error, I found where my code was lacking.

 **events: {
        "click .timepicker": "placetimepicker"
    },
    placetimepicker: function () {
        this.$(".timepicker").timepicker({ ampm: true,
                hourMin: 8,
                hourMax: 16
            });**
    }
});

I put a class timepicker on the textboxes and using the ‘this’ keyword I could append the jquery code unto the entire itemview.

Backbone is cool. 😀