Почему наблюдаемая не стреляет?

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 для открытия диалогового окна. Проблема заключается в том, что когда пользователь изменяет значения в пользовательском интерфейсе, значения в self.tagBuild.templateSize() или других наблюдаемых не изменяются. В чем может быть проблема?

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

Это похоже на предыдущую проблему, с которой я вам помог. Вы должны исправить способ определения компонентов 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 для преобразования ввода в режим только для чтения.

Вот поваренная книга, в которой показан правильный синтаксис тега, а также документация, в которой показано каждое свойство, которое вы можете использовать для тега.

---

PS Пожалуйста, считайте Кулинарную книгу своей библией для OJET. Это красиво написано и очень тщательно. Вы не сможете использовать компоненты OJET другим способом.