更新變量

Question

我有這種說法在我的主幹應用程序，

app.TabbedInterfaceView = Backbone.View.extend({ 

tagName: 'article', 
className: 'project_info', 

template: _.template($("#tpl-projects-tabs").html()), 

events: { 
    'mouseover .tabs ul.nav li' : 'activeTab', 
    'mouseleave .tabs ul.nav li' : 'unactiveTab', 
    'click .js-tab-link, span.new' : 'showHideContent', 
    'click .closed' : 'showContent', 
    "click .js-open-task-adder-form": "openTaskAdder", 
}, 

initialize: function() { 
    //this.render(); 
}, 

render: function() { 
    console.log("TabbedInterfaceView triggered"); 
    console.log(app.tasks); 
    var completedTasks = []; 

    $.each(app.tasks.models, function(key, value) { 
     if(value.attributes.completed != "active") { 
      console.log("here"); 
      completedTasks.push(key); 
     } 
    }); 

    this.$el.empty().append(this.template({ 
     p: app.project.toJSON(), 
     dates: app.projectDates, 
     files: app.fileDetails, 
     tasks: app.tasks, 
     completedTasks: completedTasks 
    })); 

    return this; 
} 
}); 

這將使用這個模板，

<div class="tabs"> 
    <ul class="nav"> 
     <li class="actived open"><a href="#brief" class="tab-link js-tab-link"><span class="expander"></span>Brief + Notes</a><span class="new"></span></li> 
     <li class=""><a href="#dates" class="tab-link js-tab-link"><span class="expander"></span>Dates</a><span class="new"></span></li> 
     <li class=""><a href="#files" class="tab-link js-tab-link"><span class="expander"></span><%= files.count %> Files</a><span class="new fileinputbar-button js-add-files list-header-add">+</span></li> 
     <li class=""><a href="#tasks" class="tab-link js-tab-link"><span class="expander"></span><%= completedTasks.length %>/<%= tasks.length %> Tasks</a><span class="new fileinputbar-button js-open-task-adder-form list-header-add"></span></li> 
    </ul> 

我所想要做的就是更新變量tasks保存新任務時，保存任務的代碼如下所示，

submitFormCheck: function(e) { 

    if (e) { 
     e.stopImmediatePropagation(); 
     e.preventDefault(); 
    } 
    var self = this; 


    //do some checking to see if form is empty 
    if (this.formInput.val().trim() === '') { 
     this.formInput.addClass(this.errorClass); 
    } else { 
     this.formInput.removeClass(this.errorClass); 


     var date; 
     date = new Date(); 
     date = date.toISOString(); 
     // date = date.getUTCFullYear() + '-' + 
     // ('00' + (date.getUTCMonth()+1)).slice(-2) + '-' + 
     // ('00' + date.getUTCDate()).slice(-2) + ' ' + 
     // ('00' + date.getUTCHours()).slice(-2) + ':' + 
     // ('00' + date.getUTCMinutes()).slice(-2) + ':' + 
     // ('00' + date.getUTCSeconds()).slice(-2); 

     this.collection.create({ 
      task_name: this.formInput.val(), 
      project_id: this.projectId, 
      parent_id: this.parentId, 
      parent_type: this.parentType, 
      completed: 'active', 
      created_on: date, 
      item: this.itemName, 
      stage: this.subItemName 

     }, { 
      wait: true, 
      success: function() { 
       self.formInput.val(''); 
       self.formInput.focus(); 
      } 
     }); 
    } 
}, 

我想我應該能夠添加到這一點的成功回調，

var tabbedInterface = app.TabbedInterfaceView;
tabbedInterface.render()

但這似乎什麼也不做，你可以看到在這篇文章的頂部渲染方法。我是否在做大量錯誤的事情，我認爲重新呈現我的標籤視圖會起作用，但事實並非如此。

Answer 1

你需要調用new來實例化app.TabbedInterfaceView;

var tabbedInterface = new app.TabbedInterfaceView(); 
tabbedInterface.render(); 

此外，您可能希望將事件處理程序在你app.TabbedInterfaceView偵聽更改任務和調用渲染綁定。

app.TabbedInterfaceView = Backbone.View.extend({ 
    initialize: function() { 
    this.listenTo(app.tasks,'change',this.render); // when app.tasks changes - re-render 
    }, 
    // your existing code below //