Nativescript - Update dynamic textfield source on click
<p>I just want to ask how can I update the dynamic textfield upon a button click? The textfield is dynamic and the value should come from observable.</p>

<p><strong>Code Behind</strong></p>

<pre><code>var observableModule = require("data/observable");
var source = new observableModule.Observable();

var HomePage = function() {};
HomePage.prototype = new BasePage();
HomePage.prototype.constructor = HomePage;

HomePage.prototype.contentLoaded = function(args) {
    var page = args.object;

    source.textSource = "sample";

    var layout = page.getViewById("stackID");
    var textField = new TextFieldModule.TextField();

    var textFieldBindingOptions = {
        sourceProperty: "textSource",
        targetProperty: "text",
        twoWay: false
    };

   textField.bind(textFieldBindingOptions, source);

   layout.addChild(textField);
}

HomePage.prototype.buttonTap = function() {
  source.textSource = "new word";
  source.update();
}
</code></pre>

<p><strong>XML</strong></p>

<pre><code>&lt;stack-layout loaded="contentLoaded" id="stackID"&gt;
    &lt;Button tap="buttonTap" text="Update" /&gt;
&lt;/stack-layout&gt;
</code></pre>