title: Bind text to a global function
body: <p>Trying to bind <code>text</code> to a global function outside the viewmodel throws the following error:</p>
  
  <blockquote>
    <p>knockout.js:60 Uncaught ReferenceError: Unable to process binding "foreach: function (){return names }"
    Message: Unable to process binding "text: function (){return myFunction($data) }"
    Message: myFunction is not defined</p>
  </blockquote>
  
  <p><a href="https://jsfiddle.net/1hz10pkc/" rel="nofollow">Reproduction online</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul data-bind="foreach: names"&gt;
      &lt;li data-bind="text: myFunction($data)"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>function myFunction(text){
      return text + '--';
  }
  
  function demoViewModel() {
      self.names = ['a', 'b', 'c'];
  
      return self;
  }
  
  var mm = new demoViewModel();
  
  ko.applyBindings(mm);
  </code></pre>
  
  <p>Instead, if I extend <code>String</code> object and apply the function in the following way, it works as expected:</p>
  
  <pre><code>&lt;li data-bind="text: $data.myFunction()"&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Extending String object:</p>
  
  <pre><code>String.prototype.myFunction = function(){
      return this + '--';
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/1hz10pkc/1/" rel="nofollow">Reproduction online</a></p>
  
  <p>Why is this? Isn't there a better way to apply a global function to a <code>text</code> binding?</p>