Backbone View属性未设置

时间:2012-07-18 20:49:38

标签: javascript backbone.js

我有一个属性视图,我想在获取提取请求时更新其值。

    define(['underscore','backbone','models/taskCollection'],
            function( _,Backbone,TaskCollection) {
            var UserTasksView = Backbone.View.extend({
                el:"#user-task-list",
                cur_task: undefined,
                initialize: function() {
                    this.collection = new TaskCollection;
                    this.model = this.collection._model;

                    _.bindAll(this,'render');
                    this.collection.bind('reset',this.render);
                },
view_task: function( event ) {

                var el = $(event.currentTarget);
                var task_id = el.attr('data-taskid');
                var row = el.parents('td').parents('tr.task-row');

                row.addClass("active");

                el.hide();
                el.next('a').show();

                var task = this.collection.fetch({
                    data: {id:task_id},
                    silent:true,
                    success:this._task_fetch_success
                });

                this._show_task_detail();

                event.preventDefault();
            },

            _task_fetch_success: function(response,status,xhr) {
                this.cur_task = JSON.stringify(status);
                return status;
            },

            /**
            * Displays the details of a task
            **/
            _show_task_detail: function() {
                var main = $('.app-content');
                var detail_view = $('.app-extra');
                var task_detail_view = $("#task-detail-view");

                //Reduce task list view width
                main.animate({
                    "width":"50%"
                },2000);
                //Display app extra bar
                detail_view.show();
                //show task detail  view
                detail_view.children('active-page').hide().removeClass('active-page').addClass('inactive-page');
                task_detail_view.show().removeClass('inactive-page').addClass('active-page');
                console.log(this.cur_task);
                var template = ich.task_detail(this.cur_task)
                $('div.task-details').html(template);
            }

fetch的ajax请求触发成功并且成功回调执行,但是当我尝试记录“cur_task”属性时,它显示为未定义; 我做错了什么

1 个答案:

答案 0 :(得分:1)

你有几个问题从这里开始:

var task = this.collection.fetch({
    data: {id:task_id},
    silent:true,
    success:this._task_fetch_success
});

在这里:

_task_fetch_success: function(response,status,xhr) {
    this.cur_task = JSON.stringify(status);
    return status;
}

首先,success回调不是jQuery成功回调,并且不接收通常的jQuery参数;来自fine manual

  

options哈希需要successerror个回调,这些回调将作为参数传递(collection, response)

因此,您_task_fetch_success函数的调用时间为f(collection, response),而不是f(response, status, xhr),因为您的预期;这就是为什么你必须将status参数视为JSON:status实际上是response

您的下一个问题是this不是您认为_task_fetch_success功能中的内容。 Backbone的fetch just calls success as a plain old function

  var success = options.success;
  options.success = function(resp, status, xhr) {
    collection[options.add ? 'add' : 'reset'](collection.parse(resp, xhr), options);
    if (success) success(collection, resp, options); // <--------------- Right here
    collection.trigger('sync', collection, resp, options);
  };

这意味着this将是window,而不是您的观点。解决此问题的最简单方法是将_task_fetch_success添加到_.bindAll中的initialize列表中:

initialize: function() {
    //...
    _.bindAll(this, 'render', '_task_fetch_success');
    //...
}