Oracle JET: Knockout not updating variable

I have the following oracle jet and knockout html file

<oj-dialog style="display:none;width: 600px;" id="addNewTag" title='Tag New Build' cancel-behavior='icon'>
        <div slot="body">
            <div class="oj-form-layout">
                <div class="oj-form oj-sm-odd-cols-12 oj-md-odd-cols-4 oj-md-labels-inline oj-form-cols-labels-inline oj-form-cols-max2">
                    <div class="oj-flex">
                        <div class="oj-flex-item">
                            <oj-label for="releaseVersion">Release Version</oj-label>
                        </div>  
                        <div class="oj-flex-item">
                            <oj-input-text id="releaseVersion" data-bind="attr: {value: jobDetails().faReleaseVersion}"></oj-input-text>
                        </div>  

I have following snippet of JS file

       self.addTagsToBuild = function (data) {
            self.jobDetails(data);
                $('#addNewTag').ojDialog('open');}

So basically I am calling function addTagsToBuild on click of a button which should open a dialog box and I want initial value of input text box to be jobDetails().faReleaseVersion which I have declared in data-bind attribute.Unfotunately when I am running this code jobDetails() is being passed as null and so the initial value of input text with id=releaseVersion is null.What could be the issue? Any pointers?

oj-input-text is (obviously) an input field and so it both reads and writes to an observable you bind it to.

But your code is not binding it to an observable. In fact, you shouldn't even use data-bind for OJET components, because they are already used internally. You have to use the custom properties of each component.

---

First, you need to create a separate observable for oj-input-text. Why? Because if it is not on observable then no change event will be fired to the HTML to indicate that the value of faReleaseVersion has been updated.

self.faReleaseVersion = ko.observable();
self.addTagsToBuild = function (data) {
        self.jobDetails(data);
        self.faReleaseVersion(data.faReleaseVersion);
        $('#addNewTag').ojDialog('open');}

Next, use the value property of oj-input-text to bind it to faReleaseVersion.

<oj-input-text id="releaseVersion" value="{{faReleaseVersion}}"></oj-input-text>

---

Here's the Cookbook link that shows how to use oj-input-text, and here's the documentation.