javascript - Backbone js和元素

Question

我目前正在研究一种数据输入表单，该表单将在输入时采用一些时间参数。因此，我希望在项目 View 中的这些字段中使用 jquery timepicker。这是我第一次尝试与项目 View 的内部元素进行交互，我们将不胜感激。

这是我迄今为止尝试过的。

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

添加和删除按钮根据需要删除和添加项目 View 。

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

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

经过更多的研究和反复试验，我发现了我的代码缺少的地方。

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

我在文本框上放置了一个类时间选择器，并使用“this”关键字我可以将 jquery 代码附加到整个项目 View 。

Backbone 很酷。 :-D