时间戳

首页 > 解决方案 > 如何在不可编辑脚本不应用绑定的视图元素中复制数据绑定函数？

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

问题描述

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

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

见图形

到目前为止的想法

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

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

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

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

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

  4. 还有什么？


谢谢你。

编辑：仅添加 HTML 按钮<button data-bind="click: toggleResponsiveDesign">Old UI</button>，显示一个按钮，但单击它什么也不做。开发工具控制台在页面加载时给出错误（以及jQuery.Deferred exception引用错误的警告）：

未捕获的 ReferenceError：无法处理绑定“单击：函数（）{return toggleResponsiveDesign}”消息：toggleResponsiveDesign 未
 在单击时定义（在 parseBindingsString 处评估（CoreApp.js?v=v2011.0.1.1:394），:3:58 )
 在 CoreApp.js?v=v=v2011.0.1.1:394
 在 init (CoreApp.js?v=v=v2011.0.1.1:394)
 在 init (CoreApp.js?v=v2011.0.1.1:394)
 在CoreApp.js?v=v=v2011.0.1.1:394
 在 Object.G (CoreApp.js?v=v=v2011.0.1.1:394)
 在 CoreApp.js?v=v2011.0.1.1:394
 在 Object.D (CoreApp.js?v=v=v2011.0.1.1:394)
 在 h (CoreApp.js?v=v=v2011.0.1.1:394)
 在 l (CoreApp.js?v=v2011.0.1.1:394)

标签： mvvmknockout.js

解决方案

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

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

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

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

我会试一试

推荐阅读