当输入键由jquery触发时，我的模型是未定义的

When on enter keypress is triggered by jquery my model is undefined

本文关键字：我的 模型 未定义 输入 jquery      更新时间：2024-06-06

我使用require.js和backbone.js来构建我的应用程序。在我的一个观点中：

    define(['backbone', 'models/message', 'text!templates/message-send.html'], function (Backbone, Message, messageSendTemplate) {
    var MessageSendView = Backbone.View.extend({
        el: $('#send-message'),
        template: _.template(messageSendTemplate),
        events: {
            "click #send": "sendMessage",
            "keypress #field": "sendMessageOnEnter",
        },
        initialize: function () {
            _.bindAll(this,'render', 'sendMessage', 'sendMessageOnEnter');
            this.render();
        },
        render: function () {
            this.$el.html(this.template);
            this.delegateEvents();
            return this;
        },
        sendMessage: function () {
            var Message = Message.extend({
                noIoBind: true
            });
            var attrs = {
                message: this.$('#field').val(),
                username: this.$('#username').text()
            };
            var message = new Message(attrs);
            message.save();
            /*
        socket.emit('message:create', {
            message: this.$('#field').val(),
            username: this.$('#username').text()
        });
        */
            this.$('#field').val("");
        },
        sendMessageOnEnter: function (e) {
            if (e.keyCode == 13) {
                this.sendMessage();
            }
        }
    });
    return MessageSendView;
});

当jquery触发按键事件并调用sendMessage函数时，由于某种原因，消息模型是未定义的，尽管当require.js首次加载此视图时，它是可用的。有什么提示吗？感谢

请参阅我的内联评论：

sendMessage: function () {
        // first you declare a Message object, default to undefined
        // then you refrence to a Message variable from the function scope, which will in turn reference to your Message variable defined in step 1 
        // then you call extend method of this referenced Message variable which is currently undefined, so you see the point
        var Message = Message.extend({
            noIoBind: true
        });
        // to correct, you can rename Message to other name, e.g.
        var MessageNoIOBind = Message.extend ... 
        ... 
    },

我的猜测是，您已经将sendMessageOnEnter绑定为代码中其他地方的keypress事件处理程序。通过这样做，您将在调用绑定事件处理程序的函数时更改this的上下文。基本上，当你调用this.sendMessage（）时，this不再是你的MessageSendView对象，它很可能是你将keypress事件绑定到的jQuery元素。由于你使用的是jQuery，你很可能通过使用$.prokey将sendMessageOnEnter函数绑定到正确的上下文来解决这个问题。类似于：（注意-这根本没有测试）

var view = new MessageSendView();
$('input').keypress(function() {
  $.proxy(view.sendMessageOnEnter, view);
});

我希望这有帮助，这里有更多的阅读给你。编码快乐！

JavaScript 中的绑定作用域

$.proxy

相关文章：