使用Jquery rateIt插件获取未捕获的TypeError

时间:2013-12-11 08:21:41

标签: javascript jquery backbone.js rateit.js

我在我的骨干项目中使用Jquery rateIt插件。

我正在使用它的AJAX示例部分。

我可以看到图片正在加载没有调用通过,没有响应,有些时间会出现错误,如

“未捕获的TypeError:对象rateAnswer没有方法'应用'”

这是我的JS

define(['jquery', 'underscore', 'backbone', 'text!tpl/questionnaire.html', 'Collection/cAppCollection', 'Models/mAppModel', 'jqueryRateIt'], 
function($, _, Backbone, questionnaireTpl, appCollection, appModel, jqRateIt) {

var questionnaire = Backbone.View.extend({

    el : '.row',
    template : _.template(questionnaireTpl),

    initialize : function(e) {

        $('.hero-unit').css('display','none');
        this.render(e);
    },
    //this renders my template 
    //on success of response , loads response than call rateit() function than bind rated and reset to function rateAnswer
    //but here no call fo rateAnswer
    render : function(e) {

            var elem = this.$el,
                temp = this.template,
                appCollectObj = new appCollection();

                appCollectObj.fetch({
                    data: $.param({subject: e.id}),
                    success: function(model, response) {
                            $(elem).html(temp({model:response}));
                             $('div.rateit').rateit();
                             $('#products .rateit').bind('rated reset', 'rateAnswer');
                            },
                    error: function() {
                            console.log('Failed to fetch!');
                            }
                });

    },

    rateAnswer : function(){

                var ri = $(this),
                appCollectObj = new appCollection();


                var value = ri.rateit('value');
                var questionId = ri.data('productid'); 

                appCollectObj.fetch({
                    data: $.param({questionId : questionId, value : value}),
                    success: function(model, response) {
                            $('#response').append('<li>' + data + '</li>');
                            },
                    error: function() {
                            $('#response').append('<li style="color:red">' + msg + '</li>');
                            }
                });
    }
  });

  return questionnaire;
});

和HTML部分

<div id="products">
        <ul>
          <li>
           RateIt: <div data-productid="<%= elem.id %>" class="rateit"></div>
          </li>
        </ul>
        <ul id="response"></ul>
      </div>

here the link to RateIt plugin example

1 个答案:

答案 0 :(得分:1)

错误消息是典型的事件绑定错误地完成...(尝试调用应用于非函数的东西)。

$('#products .rateit').bind('rated reset', 'rateAnswer');

我从未见过这种语法,您在文档中看到哪些可以提供字符串而不是函数参数?

在这里你要绑定到回调之外的函数,所以在appCollectObj.fetch之前添加如下内容:

var thisView = this;

然后应该是:

$('#products .rateit').bind('rated reset', thisView.rateAnswer);

你可能会遇到问题,因为事件处理程序中的这个问题将无法按预期运行...所以你可以用$ .proxy(或_.underscore中的_.bindAll ...)包装你的rateAnswer :

$('#products .rateit').bind('rated reset', $.proxy(thisView.rateAnswer, thisView));