Why is observable not firing?

Question

I have the following JS code

        self.tagBuild = {
            systemId : ko.observable(),
            releaseVersion : ko.observable(),
            subReleaseVersion : ko.observable(),
            templateSize : ko.observable(),
            rehydrationCode : ko.observable(),
            repoLocation : ko.observable(),
            templateLocation : ko.observable(),
            faIntegLabel : ko.observable(),
            rehydrationCode : ko.observable(),
            cdrmDBTemplate : ko.observable(),
            dbOperation :ko.observable()
        }

I am initializing the values using the code below

            self.tagBuild.systemId(self.jobDetails().system_id);
            self.tagBuild.releaseVersion(self.jobDetails().faReleaseVersion);
            self.tagBuild.templateSize(self.jobDetails().templateSize);
            self.tagBuild.rehydrationCode(self.jobDetails().repoLocation + "/ovm-tooling/oracle-ovmautomation-all.zip");
            self.tagBuild.repoLocation(self.jobDetails().repoLocation);
            self.tagBuild.templateLocation(self.jobDetails().templateLocation);

I use tagBuild for opening a dialogbox. The issue is that when user changes the values in UI,the values in self.tagBuild.templateSize() or other observables do not change. What could be the issue?

The html code is below which uses observable

        <div slot="body">
        <!-- ko with:tagBuild-->
            <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="systemID" >System ID</oj-label>
                                </div>  
                                <div class="oj-flex-item">
                                    <oj-input-text id="releaseVersion" data-bind="attr: {value:systemId,readonly:true} " ></oj-input-text>
                                </div>  
                            </div>
                    <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:releaseVersion}" ></oj-input-text>
                        </div>  
                    </div>
                    <div class="oj-flex">
                        <div class="oj-flex-item">
                            <oj-label for="subReleaseVersion">Sub Release Version</oj-label>
                        </div>
                        <div class="oj-flex-item">
                            <oj-input-text id="subReleaseVersion" data-bind="attr: {value:subReleaseVersion}"></oj-input-text>
                        </div>    
                    </div>
                    <div class="oj-flex">
                        <div class="oj-flex-item">
                            <oj-label for="templateSize">Template Size</oj-label>
                        </div>  
                        <div class="oj-flex-item">
                            <oj-input-text id="templateSize" data-bind="attr: {value:templateSize}"></oj-input-text>
                        </div>
                    </div>
                    <div class="oj-flex">
                            <div class="oj-flex-item">
                                <oj-label for="templateSize1">Template Size</oj-label>
                            </div>  
                            <div class="oj-flex-item">
                                <oj-input-text id="templateSize1" data-bind="attr: {value:templateSize}"></oj-input-text>
                            </div>
                        </div>
                    <div class="oj-flex">
                        <div class="oj-flex-item">
                            <oj-label for="repoLocation">Repo Location</oj-label>
                        </div>
                        <div class="oj-flex-item">
                            <oj-input-text id="repoLocation" data-bind="attr: {value:repoLocation}"></oj-input-text>
                        </div>
                    </div>
                    <div class="oj-flex">
                        <div class="oj-flex-item">
                            <oj-label for="templateLocation">Template Location</oj-label>
                        </div>
                        <div class="oj-flex-item">
                            <oj-input-text id="Config" data-bind="attr: {value:templateLocation}"></oj-input-text>
                        </div>
                    </div> 
                    <div class="oj-flex">
                            <div class="oj-flex-item">
                                <oj-label for="FAIntegLabel">FA Integ Label</oj-label>
                            </div>
                            <div class="oj-flex-item">
                                <oj-input-text id="FAIntegLabel" data-bind="attr: {value:faIntegLabel}"></oj-input-text>
                            </div>
                        </div>               
                    <div class="oj-flex">
                        <div class="oj-flex-item">
                            <oj-label for="rehydrationCode">Rehydration Code </oj-label>
                        </div>
                        <div class="oj-flex-item">
                            <oj-input-text id="rehydrationCode" data-bind="attr: {value:rehydrationCode}"></oj-input-text>
                        </div>
                    </div>
                    <div class="oj-flex">
                            <div class="oj-flex-item">
                                <oj-label for="cdrmDBTemplate">CDRM DB Template </oj-label>
                            </div>
                            <div class="oj-flex-item">
                                <oj-input-text id="cdrmDBTemplate" data-bind="attr: {value:cdrmDBTemplate}"></oj-input-text>
                            </div>
                        </div> 
                </div>
            </div>           
        <!--/ko-->
        </div>
        <div slot="footer">
            <oj-button id="okButton" class='oj-button-primary' data-bind="click: saveBuildTags">Submit</oj-button>
        </div>

</oj-dialog>

Answer 1

This is similar to the previous problem I had helped you with. You have to correct the way you define the Oracle-JET components.

• Don't use data-bind for Oracle-JET components, they are already used internally. You have to use the properties of oj-input-text directly.
• Also take note of the double brackets {{}} and [[]]. They have special meaning in Oracle JET. The first creates read and write listeners for the observable inside it, while the second creates just a read listener. Your code is missing that. But the initial values work just fine because Knockout is able to help you out till that point.

Redo all your oj-input-text tags like this:

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

Note that readonly is also a property of oj-input-text tag, and so it will work nicely, providing the OJET styles to convert the input to readonly mode.

Here's the Cookbook that shows you the right syntax for the tag, and here's the documentation that shows you every property you can possibly use for the tag.

---

P.S. Please think of the Cookbook as your bible for OJET. It's beautifully written and very thorough. You won't be able to use OJET components any other way.