Oracle JET：淘汰赛不更新变量答案

【问题标题】：Oracle JET: Knockout not updating variableOracle JET：淘汰赛不更新变量
【发布时间】：2019-02-15 04:46:08
【问题描述】：

我有以下 oracle jet 和淘汰赛 html 文件

<oj-dialog style="display:none;width: 600px;" id="addNewTag" title='Tag New Build' cancel-behavior='icon'>
        <div slot="body">
            <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="releaseVersion">Release Version</oj-label>
                        </div>  
                        <div class="oj-flex-item">
                            <oj-input-text id="releaseVersion" data-bind="attr: {value: jobDetails().faReleaseVersion}"></oj-input-text>
                        </div>

我有以下 JS 文件的 sn-p

       self.addTagsToBuild = function (data) {
            self.jobDetails(data);
                $('#addNewTag').ojDialog('open');}

所以基本上我在单击应该打开一个对话框的按钮时调用函数 addTagsToBuild，我希望输入文本框的初始值是我在数据绑定属性中声明的 jobDetails().faReleaseVersion。不幸的是，当我正在运行此代码 jobDetails() 被作为 null 传递，因此 id=releaseVersion 的输入文本的初始值为 null。可能是什么问题？有什么指点吗？

【问题讨论】：

我可以向你保证，当我在 js 文件中执行 console.log(self.jobDetails().faReLeaseVersion) 时，我得到的值不为空。
请不要通过 cmets 添加到您的问题中。 Stack Overflow is not a forum。相反，只需单击问题下方的编辑按钮即可添加任何相关信息。

标签： knockout.js observable knockout-3.0 oracle-jet

【解决方案1】：

oj-input-text （显然）是一个输入字段，因此它可以读取和写入您绑定到的可观察对象。

但是您的代码没有将其绑定到可观察对象。事实上，您甚至不应该将data-bind 用于 OJET 组件，因为它们已经在内部使用。您必须使用每个组件的自定义属性。

首先，您需要为oj-input-text 创建一个单独的 observable。为什么？因为如果它不是可观察的，则不会向 HTML 触发任何更改事件以指示 faReleaseVersion 的值已更新。

self.faReleaseVersion = ko.observable();
self.addTagsToBuild = function (data) {
        self.jobDetails(data);
        self.faReleaseVersion(data.faReleaseVersion);
        $('#addNewTag').ojDialog('open');}

接下来，使用oj-input-text 的value 属性将其绑定到faReleaseVersion。

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

这是显示如何使用oj-input-text 的Cookbook 链接，这是documentation。

【讨论】：

【解决方案2】：

将您的变量绑定到可观察对象，然后淘汰赛开始观察

self.testVariable = ko.observable();

【讨论】：