在页面上更改输入时，不会触发骨干视图事件

Question

以下是我设置的简单模型/相应视图。它链接到一个带有几个下拉菜单和一个输入文本框的表。我希望在文本框和下拉列表中的值发生变化时触发视图方法，但是我没有运气。

使用console.log语句和断点，似乎执行的唯一方法是模型中的initialize方法。下拉/输入框值更改时，不会触发任何视图方法。

小提琴：http://jsfiddle.net/qneL65zs/14/

骨干

$(document).ready(function() {
    var QuoteHistory = Backbone.Model.extend({
        //urlRoot: '/Values/SaveQuote',

        defaults: {
            hub: new Backbone.SignalR("QuoteHub"),
            avgHist: "",
            State: "",
            AgeGroup: "",
            Purchase: "",
            PastQuote: "",
            Date: "",
            AverageQuote: ""
        },

        initialize: function () {
            console.log("Model initialize");
        }
    });

    var QuoteView = Backbone.View.extend({
        el: $('#QuoteInput'),

        events: {
            "input td input#QuotePurchase": "udpatePurchase",
            "change #QuoteAge": "udpateQuoteAge",
            "change #QuoteState": "udpateState",
            "click #QuoteSave": "udpateModel"
        },

        initialize: function() {
            _.bindAll(this, 'updatePurchase', 'updateQuoteAge', 'updateState');

            this.model.bind('change', this.updatePurchase);
            this.model.bind('change', this.updateQuoteAge);
            this.model.bind('change', this.updateState);
        },

        render: function () {
            console.log("render");
            this.model.pullAverageQuote();
        },

        updatePurchase: function() {
            console.log("update purchase");
            var val = this.$el.find('#QuotePurchase').val();
            this.model.set({ Purchase: val });
        },

        updateQuoteAge: function () {
            console.log("update age");
            var val = this.$el.find('#QuoteAge option:selected').val();
            this.model.set({ AgeGroup: val });
        },

        updateState: function () {
            console.log("update state");
            var val = this.$el.find('#QuoteState option:selected').val();
            this.model.set({ State: val });
        },

        updateModel: function () {
            console.log("update model");
            this.model.save(this, {
                success: function() {
                    console.log("success");
                    this.model.pullAverageQuote();
                },

                error: function(error) {
                    console.log("error during update");
                    console.log(error);
                }
            });
        }
    });

    $(function() {
        var quoteHistory = new QuoteHistory;
        var quoteView = new QuoteView({ model: quoteHistory });
    });
});

HTML

<table class="table table-striped" id="QuoteInput">
                            <thead>
                                <tr>
                                    <th colspan="2"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>State</td>
                                    <td>
                                        <select id="QuoteState">
                                            <option value="AZ">AZ</option>
                                            <option value="CA">CA</option>
                                            <option value="OR">OR</option>
                                            <option value="WA">WA</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Age Group</td>
                                    <td>
                                        <select id="QuoteAge">
                                            <option value="35_45">35-45</option>
                                            <option value="45_55">45-55</option>
                                            <option value="55_65">55-65</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Purchase Payment</td>
                                    <td>
                                        <input type="text" id="QuotePurchase" style="width: 6em; text-align: center;">
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2"><button type="button" id="QuoteSave">Save</button></td>
                                </tr>
                            </tbody>
                        </table>

修改

以下屏幕截图来自View console.log(this)方法

中的initialize声明

第二次编辑

以下是放置在视图的console.log(this)方法末尾的initialize语句的输出。

此输出与下面的注释中提到的console.log(quoteView)语句相同。

Answer 1

<强>更新

添加JSfiddle之后，我们确定只有表单元素事件的“更改”没有被触发（点击工作） - 进一步搜索显示这是骨干的问题：

Backbone.js html select / radio change event is not firing, but click event is

Answer 2

如果您在初始化视图后尝试拨打render()该怎么办？

即

   var quoteHistory = new QuoteHistory;
   var quoteView = new QuoteView({ model: quoteHistory });
   quoteView.render();