Javascript 在与Vue.js相同的页面上使用Knockout.js

嗨，我有一个现有的项目，它使用了大量的knockoutjs

我正在尝试将vuejs添加到项目中，并慢慢地将所有内容及时转移到vuejs

我将vue添加到包含整个页面的包装器元素中，并创建了一个vue组件

我的目标是在页面的任何地方使用该组件，但不要破坏我的击倒代码

我遇到的问题是，当我将vue el标记应用于包装页面和ko.applyBindings脚本的主元素时，没有定义我的敲除绑定。（vue元素工作正常，但所有ko脚本都会抛出错误）

我正在使用符合要求的模板和vue cli以及webpack simple

我对vuejs很陌生，但我认为这是因为vue试图解析html页面中的knockoutjs代码

控制台错误：

ReferenceError: Unable to process binding "slideVisible: function(){return !isShowBillingForm() }"
Message: isShowBillingForm is not defined
at slideVisible (eval at parseBindingsString (knockout-3.3.0.js:61), <anonymous>:3:65)

at init (slidevisible.js:15)
at knockout-3.3.0.js:65
at Object.u (knockout-3.3.0.js:35)
at knockout-3.3.0.js:65
at Object.o (knockout-3.3.0.js:10)
at g (knockout-3.3.0.js:65)
at h (knockout-3.3.0.js:63)
at k (knockout-3.3.0.js:63)
at h (knockout-3.3.0.js:63)

ReferenceError:无法处理绑定“slidevible:function（）{return！isShowBillingForm（）}”
消息：未定义isShowBillingForm
在slideVisible（在parseBindingsString（knockout-3.3.0.js:61），：3:65处求值）
在初始化时（slidevible.js:15）
在淘汰赛-3.3.0.js:65
在Object.u（knockout-3.3.0.js:35）
在淘汰赛-3.3.0.js:65
在Object.o（knockout-3.3.0.js:10）
g级（淘汰赛-3.3.0.js:65）
h时（淘汰赛-3.3.0.js:63）
在k（淘汰赛-3.3.0.js:63）
h时（淘汰赛-3.3.0.js:63）

如果有人能帮我，那太棒了

（我还将vue cdn添加到标题中，并将vue标记直接添加到页面中，它们之间没有冲突）所以我猜这与编译的模板有关

我已将Vue添加到包含整个页面的包装器元素中，并创建了单个Vue组件

我相信这就是问题所在。从旧版淘汰版迁移到VueJS时，您必须选择要使用Vue的位置

Vue解析DOM的方式与Knockout非常不同。它使用了虚拟DOM的概念，因此最终的DOM输出只有有效的HTML，没有特定于框架的标记。这将打破任何绑定到它的KO代码

因此，我推荐的方法是找到要转换为Vue的应用程序片段，然后在淘汰型VM（或普通JS）中实例化Vue，如下所示：

import Vue from 'vue';
import MyVueComponent from 'libs/components/my-component.vue';

const propsData = {my: props};
const myComponent = Vue.extend(MyVueComponent);
new myComponent({el: '#some_element', propsData: propsData})

同样重要的是，请确保告诉KO不要使用所述的

停止绑定

处理程序处理Vue绑定到的

#某些元素

---

希望有帮助

在使用knockout时，您的错误是一个非常常见的错误。这意味着您已尝试将绑定应用于具有未在viewmodel上定义的值的视图。也就是说：当我从包装器元素中移除id=“app”时，在元素的绑定上下文中没有

isShowBillingForm

属性，并且

data bind=“slideVisible…”

所有的敲除绑定都会工作，这将vue应用于页面。