I've got a view which has a corresponding template. The template looks something like like:<div id=streamItems class=left-list droppable-list></div><div class=context-buttons>    <div class=left-group>        <div id=shuffleButtonView class=view-placeholder></div>        <div id=repeatButtonView class=view-placeholder></div>        <div id=radioButtonView class=view-placeholder></div>    </div>    <div class=right-group>        <button id=saveStream class=button-icon button-small save <%= userLoaded ? '' : 'disabled' %> title=<%= userLoaded ? saveStreamMessage : cantSaveNotSignedInMessage %>>            <i class=fa fa-save></i>        </button>        <button id=clearStream class=button-icon button-small clear title=<%= chrome.i18n.getMessage('clearStream') %> >            <i class=fa fa-trash-o></i>        </button>    </div></div>I've passed into the template some variables such as userLoaded. This allows me to render the initial state of the saveStream button.Now, the state of userLoaded has changed and I would like to update the button. I don't want to render my entire template again because streamItems is an expensive list to render.So, I wrote the following:initialize: function() {    this.listenTo(User, 'change:loaded', this.toggleSaveStream);},toggleSaveStream: function () {    var userLoaded = User.get('loaded');    var templateHelpers = this.templateHelpers();    this.ui.saveStreamButton.toggleClass('disabled', userLoaded);    this.ui.saveStreamButton.attr('title', userLoaded ? templateHelpers.saveStreamMessage : templateHelpers.cantSaveNotSignedInMessage);}Which serves to keep my button up to date.I'm unhappy with this solution because the logic for the disabled state of the button is duplicated into two spots. Is this a valid concern? How to handle?Button is rendered disabled in template and I don't want to re-render whole template to change button state. How to stay DRY?
toggleSaveStream button template
javascript;template
From looking at it, the name of your function toggleSaveStream is lying, calling it twice will not make it toggle, it will look at the the status of the user and set the status accordingly. So I would simply call it updateSaveStreamButton.Since it does that, you could call it at first, de-activating the button, and then once the user is loaded call it again. Then you would simply have<button id=saveStream class=button-icon button-small save disabled> title=>And theninitialize: function() {    this.updateSaveStreamButton();    this.listenTo(User, 'change:loaded', this.updateSaveStreamButton);},updateSaveStreamButton: function () {    var userLoaded = User.get('loaded');    var templateHelpers = this.templateHelpers();    this.ui.saveStreamButton.toggleClass('disabled', userLoaded);    this.ui.saveSelectedButton.attr('title', userLoaded ? templateHelpers.saveStreamMessage : templateHelpers.cantSaveNotSignedInMessage);}This sounds too easy, so feel free to point what I am missing ;)