Oracle JET: Knockout not updating variable

Question

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?

I can assure you that when I do console.log(self.jobDetails().faReLeaseVersion) in js file I get the value and it is not null. — Chirayu Sharma, Sep 10 '18 at 17:55
Please don't add to your question via comments. [Stack Overflow is not a forum](https://meta.stackexchange.com/questions/92107/are-stack-exchange-sites-forums). Instead, simply click the edit button under your question to add any relevant information. — Erik Philips, Sep 10 '18 at 18:16

score 2 · Accepted Answer · answered Sep 11 '18 at 00:28

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.

score 0 · Answer 2 · answered Apr 23 '19 at 15:50

0

Bind your variable to an observable then knockout starts observing

self.testVariable = ko.observable();

answered Apr 23 '19 at 15:50

Phani Kumar

61
2
10

Oracle JET: Knockout not updating variable

2 Answers2

Linked