Knockout title not updating with observable

Question

I have a knockout binding with a function that should update the title depending on whether the page is in edit mode or not. The function seems to be working as expected, returning an empty string in edit mode, and the title if not. However, using dev tools I can see that for some reason the title is not updating in the HTML. Any help would be great, thanks.

KO template

// View Model
var self = this;
var isEditMode = self.isEditMode;

var myModel = function(data) {
  ko.mapping.fromJS(data, {}, this);
  var self = this;

  self.getTitle = ko.computed(function() {
    var str = '';

    if (!isEditMode()) {
      str = 'my title';
    }
    return str;
  });
};

var mapping = {
  create: function(options) {
    return new myModel(options.data);
  }
}

var model = ko.mapping.fromJS(self.data(), mapping);
ko.applyBindings(model);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
  <tbody data-bind="template: { name: 'myTemplate', foreach: $data }"></tbody>
</table>

<script type="text/html" id="myTemplate">
  <tr data-bind="title: setTitle">
    <td>
      <span data-bind: "text: name()"></span>
    </td>
  </tr>
</script>

Answer 1

Why don't you directly bind a ko.observable to the span element? Like:

self.name = ko.observable('test');

In HTML:

<span data-bind: "text: $data.name"></span>