为什么 observable 没有触发？

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() 或其他 observables 不会改变。 可能是什么问题？

下面是使用 observable 的 html 代码

        <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

这类似于我帮助过你的previous problem。您必须更正定义 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 向您展示了标签的正确语法，documentation 向您展示了您可能用于标签的每个属性。

---

附：请把 Cookbook 视为您的 OJET 圣经。它写得很漂亮而且非常透彻。您将无法以任何其他方式使用 OJET 组件。