title: In a Knockout.js view, when do I call an observable as a function?
body: <p>I am having difficulty following this example from the <a href="https://knockoutjs.com/documentation/hasfocus-binding.html" rel="nofollow noreferrer">official documentation for the hasFocus binding</a></p>
  <p>View:</p>
  <pre><code>&lt;p&gt;
      Name: 
      &lt;b data-bind=&quot;visible: !editing(), text: name, click: edit&quot;&gt;&amp;nbsp;&lt;/b&gt;
      &lt;input data-bind=&quot;visible: editing, value: name, hasFocus: editing&quot; /&gt;
  &lt;/p&gt;
  &lt;p&gt;&lt;em&gt;Click the name to edit it; click elsewhere to apply changes.&lt;/em&gt;&lt;/p&gt;
  </code></pre>
  <p>ViewModel:</p>
  <pre><code>function PersonViewModel(name) {
      // Data
      this.name = ko.observable(name);
      this.editing = ko.observable(false);
           
      // Behaviors
      this.edit = function() { this.editing(true) }
  }
   
  ko.applyBindings(new PersonViewModel(&quot;Bert Bertington&quot;));
  </code></pre>
  <p>My confusion comes from the &quot;editing&quot; observable which has not been declared as a function but is being called in the view like a function with <code>!editing()</code> and not like a function with <code>visible: editing</code> and <code>hasFocus: editing</code>.</p>
  <p>I have read the documentation from knockoutjs.com but can't figure out what the rules are for referencing observables from the view. If I have an observable foo when do I reference it in the view as foo() and when do I reference it as foo?</p>