toggleSaveStream button template

Question

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?

Answer 1

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 then

initialize: 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 ;)