Магистраль JS и элементы

Question

В настоящее время я работаю над формой ввода данных, которая будет принимать во время ввода некоторые временные параметры. В результате я хочу использовать jquery timepicker в этих полях в пределах itemView. Я впервые пытаюсь взаимодействовать с внутренними элементами представления предметов, и помощь будет принята с благодарностью.

Это то, что я пытался до сих пор.

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

Кнопки добавления и удаления позволяют удалять и добавлять виды элементов по желанию.

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

Это шаблон для вида товара

<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

После дополнительных исследований, проб и ошибок я обнаружил, что моего кода не хватает.

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

Я поместил указатель времени класса в текстовые поля и, используя ключевое слово this, мог добавить код jquery ко всему представлению элемента.

Магистраль это круто. : -D

Answer 2

Трудно определить ваш вопрос.Я думаю, что вы спрашиваете, почему таймер не инициализируется для ваших входов.Попробуйте обернуть ваш элемент события в jquery $ (e.el) , поскольку ваш таймер выбора является плагином jquery:

    placetimepicker: function (e) {
        $(e.el).timepicker({ ampm: true,
                hourMin: 8,
                hourMax: 16
            });