2012-07-18 101 views
0

我有一个属性的视图,我想更新它的值,当我提出一个获取请求。骨干查看属性没有设置

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); 
      } 

由获取Ajax请求触发成功,成功回调执行,但是当我尝试登录“cur_task”属性,它显示为不确定的; 我在做什么错

回答

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参数;从:

options散列接受successerror回调将被传递(collection, response)作为参数。

所以你_task_fetch_success功能被称为f(collection, response)不是f(response, status, xhr)因为你期待;这就是为什么您必须将status参数视为JSON:status实际上是response

您的下一个问题是,this是不是你认为它在你的_task_fetch_success功能。骨干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); 
    }; 

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

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