如何在不可编辑脚本不应用绑定的视图元素中复制数据绑定函数？

Posted 2023-03-27

【中文标题】如何在不可编辑脚本不应用绑定的视图元素中复制数据绑定函数？

【英文标题】：How to duplicate a data-bound function in a view element to which the un-editable script does not apply bindings?

【发布时间】：2021-02-25 22:34:11

【问题描述】：

我是淘汰初学者，我在一个平台上工作，只有 VIEW（称为模板）是可编辑的 - ViewModel 不可编辑，甚至不可读（除了阅读开发工具中的最小化代码）。

我正在尝试将按钮从一个模板移动到另一个模板。但是，该按钮使用数据绑定函数，并且每个模板都应用了来自不同 ViewModel（javascript 文件）的绑定（使用元素 ID）。

见Graphic

目前的想法

⚡更改目标模板的主 div 的 id 是个坏主意。

⬜ 用与源模板相同的 id 在 div 中包装新按钮？

SO 似乎一致认为重复的 id 是不好的。 2 个 ViewModel 会相互干扰吗？ 如果是这样，是否可以仅针对该新元素“暂停”或清除主要元素？

⬜ 我应该尝试在目标模板中的 <script> 标记中重新创建 ViewModel 的那部分吗？

这让人望而生畏，因为我不知道js和最小化的 我在 devtools 中看到的文件很长，看起来并不简单。

还有什么？

谢谢。 编辑： 仅添加 html 按钮 <button data-bind="click: toggleResponsiveDesign">Old UI</button>，会显示一个按钮，但单击它不会执行任何操作。开发工具控制台在页面加载时出现错误（以及引用错误的 jQuery.Deferred exception 警告）：

未捕获的引用错误：无法处理绑定“点击：函数（）return toggleResponsiveDesign” 消息：toggleResponsiveDesign 未定义  点击时（在 parseBindingsString (CoreApp.js?v=v2011.0.1.1:394) 处进行评估，:3:58）  在 CoreApp.js?v=v2011.0.1.1:394  在初始化时 (CoreApp.js?v=v2011.0.1.1:394)  在初始化时 (CoreApp.js?v=v2011.0.1.1:394)  在 CoreApp.js?v=v2011.0.1.1:394  在 Object.G (CoreApp.js?v=v2011.0.1.1:394)  在 CoreApp.js?v=v2011.0.1.1:394  在 Object.D (CoreApp.js?v=v2011.0.1.1:394)  at h (CoreApp.js?v=v2011.0.1.1:394)  at l (CoreApp.js?v=v2011.0.1.1:394)

【问题讨论】：

您是否尝试移动按钮？知道你遇到了什么错误会很有帮助

好点。未捕获的引用错误（无法处理绑定）。我在问题的末尾添加了全文。

页面上是否加载了 userPersonalisationApp.js？那么有机会，但你必须展示更多的机会

@johnSmith - 当它被加载时，问题是 - 它只绑定到“userPersonalizationContainer” id（在 UserDetailsPage.cshtml 中定义）。所以（上面的想法#2） - 如果我从 UserDetailsPage （源模板）中删除该 id 并将其添加到 MainMenu （目标模板）中的按钮周围的 div 中，现在有 2 个 .js 文件绑定到相同的东西 - HeaderApp .js 到主 div 和 UserPersonalizationApp.js 到按钮的 div。我收到以下错误：未捕获的错误：您不能多次将绑定应用于同一个元素。

【参考方案1】：

根据您的屏幕截图，您也许可以让 clickhandler 工作，因为 Userpersonalisationapp.js 的视图模型绑定到变量 r，您可以将 headerapp 模板中的按钮数据绑定更改为

<button data-bind="click: r.toggleResponsiveDesign">

可能你必须在其中添加() 才能使函数运行，因为它不适用于标题模板

<button data-bind="click: r.toggleResponsiveDesign()">

我会试试的

【参考方案2】：

我认为这是不可能的。如果您的图形是准确的，那么您正在使用两个完全独立的视图模型，它们没有以任何方式连接或相互了解。如果视图模型是嵌套的，从另一个访问一个视图模型将非常简单，但这里似乎并非如此。

这实际上是components 的用途。通常您会为整个应用程序调用applyBindings一次，其余的将被划分为组件，这为您提供了一种在它们之间共享数据和方法的方式。你的应用程序现在的结构方式，你不能这样做。那，以及您明显无法编辑甚至无法很好地查看视图模型真的让我感到困惑。谁认为 是个好主意？

【讨论】：

我将学习组件-谢谢！是否可以（理论上）从原始 ViewModel (UserPersonalizationApp.js) 复制相关部分并将其粘贴到目标视图 (MainMenu.cshtml) - 例如，粘贴到我的按钮正上方的