Question

我目前正在处理一个数据输入表单，它将输入一些时间参数。因此，我希望在itemview中的这些字段中使用jquery timepicker。这是我第一次尝试与项目视图的内部元素进行交互，我们将非常感谢您的帮助。

这是我到目前为止所尝试的。

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

这是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代码附加到整个itemview。

Backbone很酷。 :-D

Answer 2

很难确定你的问题。我认为你的问题是为什么时间戳没有初始化你的输入。尝试将您的event元素包装在jquery $（e.el）中，因为您的timepicker是一个jquery插件：

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

骨干js和元素

2 个答案: