Knockout js: как привязать элемент в шаблоне?

Question

Я хочу перепривязать / переоценить, должна ли пользовательская кнопка "шаблон" быть видимой или нет. Я не могу понять, как без перезагрузки всей страницы, чтобы вся модель была переоценена.

Если вы посмотрите на приведенный ниже код, я создал две кнопки шаблона, называемые "кнопка заголовка". Чего я хочу добиться, так это создать некий метод, который можно вызывать для переоценки свойства display только одной из кнопок (возможно, на основе свойства id). На моей реальной странице у меня есть около 20 кнопок, у каждой из которых более или менее свои правила отображения, и перезагрузка всей страницы, чтобы заставить их правильно отображаться / скрываться, кажется немного неэффективной...

HTML:

<header-button params='title: "Resolve Case",
             buttonText: "RESOLVE",
             onclick: parent.ResolveCase,
             display: !caseIsResolved(), 
             id: "resolve"
             '></header-button>

<header-button params='title: "Resolve this case and open next case",
             buttonText: "RESOLVE & NEXT",
             onclick: parent.ResolveAndOpenNextCase,
             display: !caseIsResolved(),
             id: "update"
             '></header-button>

Javascript viewmodel:

ko.components.register('header-button', {
  viewModel: function (params) {

    this.imgSrc = ko.observable(params.src);
    this.title = ko.observable(params.title);
    this.onclick = params.onclick;
    this.background = params.background;
    this.cssClass = "clickable";
    this.buttonText = params.buttonText;
    this.display = ko.observable(true);
    this.id = "";

    if (params.buttonText == undefined || params.buttonText == 'undefined')
    { this.buttonText = ""; }

    if (params.display == undefined || params.display == 'undefined')
    { this.display = true; }
    else {
      this.display = params.display;
    }

    if (params.id != undefined && params.id != 'undefined') {
      this.id = params.id;
    }
  },
  template: '<div class="clickable toolbarContainer" style="display: inline; text-align: center; vertical-align: middle" data-bind=" attr:{id: id}, visible: display,  click: onclick">' +
    '<img data-bind=" attr:{ src: imgSrc, title: title}, style:{verticalAlign: \'bottom\', background: background, width: 16, height: 16, marginTop: 4}" ></img>' +
    '&nbsp;<span class="headerButton" data-bind=" attr:{title: title}, text: buttonText" ></span></div>'
});

$(document).ready(function () {
    ko.applyBindings();
});