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>

You are just passing data from the "jobDetails" observable when you are initializing probably. The values you are putting into your observables, are not observables them selves, so if "jobDetails" is updated, ur tagBuild won't be updated — Joonas89, Sep 14 '18 at 11:45
It would depend on what your HTML looks like. Could you show that as well? — Ray, Sep 14 '18 at 11:46
@Joonas89 I am just setting initial value using jobdetails.The variables like self.tagBuild.releaseVersion still remain observable. — Chirayu Sharma, Sep 14 '18 at 15:37

Ray · Accepted Answer · 2018-09-14T16:53:52.463

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.

edited Sep 14 '18 at 16:53

answered Sep 14 '18 at 16:33

Ray

3,864
7
24
36

Thanks for your suggestion.You have mentioned that we should not use data-bind for oracle jet components but I see we have used data-bind frequently in our application like follows and it works fine – Chirayu Sharma Sep 15 '18 at 18:15
Interesting.. I would like to see that in working if possible. Because it looks like `filter` won't update in the JS. – Ray Sep 15 '18 at 18:20
Btw, could you help me out by upvoting the previous question's answer? thanks :) – Ray Sep 15 '18 at 18:21
Although I agree the event binding would work properly, because of the 'bubbling up' feature. – Ray Sep 15 '18 at 18:30
I have already upvoted your answer.Anything else you want me to do? – Chirayu Sharma Sep 15 '18 at 18:36
No no I meant the previous question https://stackoverflow.com/questions/52263051/oracle-jet-knockout-not-updating-variable – Ray Sep 15 '18 at 18:36
I can't upvote as I need to have some minimum number of posts before I can upvote as I am new to stackoverflow :) I have one issue with the solution suggested. As you suggested ,I have done as below

Since required is true,it should give error if user does not give any value.But it does not show error.Any pointers? – Chirayu Sharma Sep 15 '18 at 18:42
Oh ok no problem :) I'm not sure why, but you can see a working sample here http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=validators&demo=requiredValidator – Ray Sep 15 '18 at 18:47

Why is observable not firing?

1 Answers1