为什么可观察的不开火？

Question

我有如下JS代码

        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()
        }

我正在使用下面的代码初始化这些值

            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);

我使用 tagBuild 打开对话框。问题是当用户更改 UI 中的值时， self.tagBuild.templateSize() 或其他可观察值不会改变。可能是什么问题？

下面的 html 代码使用了 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

这与我帮助过您的类似。您必须更正定义 Oracle-JET 组件的方式。

不要将 data-bind 用于 Oracle-JET 组件，它们已在内部使用。您必须直接使用 oj-input-text 的属性。
还要注意双括号 {{}} 和 [[]]。它们在 Oracle JET 中具有特殊含义。第一个为其内部的可观察对象创建读写侦听器，而第二个仅创建一个读取侦听器。你的代码缺少那个。但是初始值工作得很好，因为 Knockout 能够帮助您解决问题。

像这样重做所有 oj-input-text 标签：

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

请注意，readonly 也是 oj-input-text 标记的属性，因此它将很好地工作，提供 OJET 样式以将输入转换为只读模式。

这里的 Cookbook that shows you the right syntax for the tag, and here's the documentation 向您展示了每个属性您可能用于标签的内容。

P.S。请将食谱视为 OJET 的圣经。它写得很漂亮而且非常透彻。您将无法以任何其他方式使用 OJET 组件。

为什么可观察的不开火？

Why is observable not firing?

custom-component

knockout.js

knockout-3.0

oracle-jet