Обновление переменных в другом шаблоне позвоночнике

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 //