无法理解绑定问题

Posted 2023-03-27

【中文标题】无法理解绑定问题

【英文标题】：Can't understand the binding issue

【发布时间】：2017-11-29 12:17:50

【问题描述】：

前段时间我一直在使用这种类型的绑定（使用 knockout.js），一切正常，但今天出现了一个新问题。即：

我有一个相当复杂的视图模型，它具有基于某个过程参数的“部分”。整个视图模型“绑定”到页面，但任何进程只使用它自己的部分。简单地说，想象这是你的视图模型：

    1: Object (actual view model)
    2: Object (actual view model)
    3: Object (actual view model)
    6: Object (actual view model)
    getModelData = function(paramNumber) //returns the view model)
    extractJSObject = function(paramNumber) //console.logs a "JS" object

现在，大多数教程中常用的数据绑定语法如下：

<input data-bind="value: displayedValue">

视图模型中存在一个名为 displayValue 的可观察视图模型。然而，我使用的语法遵循以下规则：

<input data-bind="value: getModelData( processID ).DataSets. nameOfDataSet ()[ indexOfDataElement ]. fieldName">

举个例子： <input data-bind="value: getModelData(1).DataSets.Countries()[0].CountryPhoneCode">

现在，由于某种原因，这似乎不起作用，以前它曾经起作用。主要是 getModelData() 函数 存在于绑定到 html 的 viewModel 中，它确实返回它需要的任何东西，所以不要被这个混淆，它是一个常规绑定，就像你是绑定任何其他对象，但我假设稍后会在某处得到#@#cked。

图像显示了控制台错误消息，以及我返回预期结果的两行代码，为什么我自己在控制台中键入可以正常工作，但模型仍然无法绑定自己，这超出了我的理解。

编辑：最后一件事，在 HTML 中，绑定不是在控制台中显示为错误，绑定是这样的：

<input data-bind="value: getModelData(6).DataSets.HumanUser()[0].Address">

【问题讨论】：

您的任何数据是否异步加载？我很好奇绑定是否在数据存在之前触发，但是一旦您在控制台中签入它就有时间加载。

另外你用的是什么版本的jQuery？

通常，在这种情况下，我会右键单击 UI 中要检查其视图模型的元素，选择“检查”，然后使用ko.dataFor($0) 来查看其中的确切内容。在您的情况下，ko.dataFor($0).getModelData(6).DataSets.HumanUser()[0].Address 可以准确查看淘汰赛所看到的内容（而不是做出任何假设）

如果在绑定前添加data-bind="text: console.log(getModelData(6)"会怎样？

@JasonSpake 好的，所以更新，JQuery 显然不是本地的，早期使用的版本是从这里获取的：<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js\"></script> 我假设是 1.12。然而，最近的变化让我们切换到：<script src=\"https://code.jquery.com/jquery-3.1.1.slim.min.js\" integrity=\"sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n\" crossorigin=\"anonymous\"></script> 这是由从 bootstrap 3 到 boostrap 4 的过渡引起的。现在 jQuery 的变化超出了我的范围。

【参考方案1】：

当 Slim 版本也发布时，jQuery 在 3.0 中弃用了 bind，但似乎 Knockout 在 jQuery 存在时仍假定 .bind 存在，因此当您 do 包含 jQuery 时需要是完整的 jQuery 而不是苗条的版本。不同之处在于 jquery 的精简版“不包括 ajax、效果和当前已弃用的代码”-reference

【讨论】：

它似乎与 bootstrap 的 CDN opttained slim 版本一起工作，它工作了几个小时，但现在我假设它可能只是正在交付的页面的缓存版本，没有版本全部。也就是说，我已经下载了一个完整的缩小版本，并将其作为文件保存在服务器上，而不是使用 CDN，并且现在似乎可以正常工作。谢谢

【参考方案2】：

好吧，既然我摆弄了正在使用的库的版本，并且在这里使用它们的顺序是结论：

Knockout.js 不需要 jQuery 来运行，没有它它也可以正常工作，事实上，只要我删除任何 jQuery，页面就开始工作并且绑定工作。 如果 jQuery 存在，则必须在 knockout.js 之前加载它，否则会发生此错误。这条规则的一个例外是#3 旧版本的 jQuery 不会因为某种原因发生冲突，即使是在 knockout.js 之后加载，但任何较新的版本都需要预先加载。

对脚本进行排序，例如： 1. jQuery 2.淘汰赛 3. 引导 一切顺利，感谢您让我看到的所有帮助和指导。

编辑：嗯...显然它工作了大约一个小时，aaa 现在不再工作了 o.0 我真的以为我已经结束了。

编辑 2：显然服务器正在提供一个缓存版本，从我删除它时就根本没有任何 jQuery。正确答案和原因标记为“已回答”谢谢大家。

【讨论】：

这可能比您想做的工作更多，但我有一个类似的页面，其中视图模型包含子视图模型。它有助于将其全部重构为单独的组件。即使我没有重复使用它们。如果他们不需要互相交谈，你的情况可能是值得的。

可悲的是，他们这样做了，所以我有整个数据网络交叉调用 shiet，它是一团糟。但是，暂时有效，所以我不想“戳熊”