javascript - 与 WebPack 捆绑时 knockout 验证中断-6ren

javascript - 与 WebPack 捆绑时 knockout 验证中断

转载作者：行者123 更新时间：2023-11-27 23:37:32

24

4

我正在使用 Knockout-Validation 插件创建 Knockout Web 应用程序。我想使用 WebPack 进行捆绑。

问题是当我使用 WebPack 时，Knockout-Validation 会中断。

作为一个简单的测试用例，我无需捆绑即可使验证正常工作:https://jsfiddle.net/3y24zvLs/

HTML:

<label>Name</label>
<input type="text" data-bind="value: name">
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

JS:

function ViewModel() {
    var self = this;
    self.name = ko.observable().extend({required: true});
};

ko.applyBindings(new ViewModel());

我还可以将它用作注册的 Knockout 组件:http://jsfiddle.net/3y24zvLs/2/

HTML:

<name-component></name-component>

JS:

function ViewModel() {
    var self = this;
    self.name = ko.observable().extend({required: true});
};

ko.components.register('name-component', {
    viewModel: ViewModel,
    template: '<label>Name</label>\
                <input type="text" data-bind="value: name">\
                <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>'
});

ko.applyBindings();

但是，当我尝试使用捆绑验证时会中断:

index.html:

<!DOCTYPE html>
<head>
  <script src="Built/main.bundle.js"></script>
</head>
<body>
  <name-component></name-component>
</body>

main.js

var ko = require('../node_modules/knockout/build/output/knockout-latest');
var $ = require('jquery');
require('./ViewModel');

$(function(){
  ko.applyBindings();
})

ViewModel.js

"use strict";

var ko = require('../node_modules/knockout/build/output/knockout-latest');
var kv = require('../node_modules/knockout.validation/dist/knockout.validation');

function ViewModel() {
    var self = this;
    self.name = ko.observable().extend({required: true});
};

ko.components.register('name-component', {
    viewModel: ViewModel,
    template: '<label>Name</label>\
                <input type="text" data-bind="value: name">\
                <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>'
});

webpack.config.js

var webpack = require('webpack'),
    path = require('path');


module.exports = {
  context: path.join(__dirname, 'App'),
  entry: './main.js',
  output: {
    path: path.join(__dirname, 'Built'),
    filename: '[name].bundle.js'
  },
  module: {
    loaders: [
      { test: /\.html$/, loader: 'html-loader'},
      { test: /\.js$/, loader: 'babel-loader'}
    ]
  }
};

有谁知道验证失败的原因吗？ Knockout-Validation 与 WebPack 配合得不好吗？也许我应该尝试改用 Gulp 或 Grunt 来捆绑组件并使用 RequireJS 而不是 WebPack/CommonJS？虽然我不完全确定这个开关有多简单......

非常感谢任何帮助。

最佳答案

我想删除这个问题，因为我刚刚解决了它，但是今天早上我浪费了一些时间试图让它发挥作用，所以如果我把它留在这里，希望能防止其他人浪费时间。

我将 jQuery、Knockout 和 Knockout-Validation 移至全局范围，并删除了一些重新定义问题。

index.html

<!DOCTYPE html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"></script>
    <script src="Built/main.bundle.js"></script>
</head>
<body>
  <name-component></name-component>
</body>

main.js

/*
  Knockout and jQuery were moved to the global scope. Knockout exports as 
  'ko' so there is no need to redefine it here.
*/

//var ko = require('../node_modules/knockout/build/output/knockout-latest');
//var $ = require('jquery');
require('./ViewModel');

$(function(){
  ko.applyBindings();
})

为了完整起见，这里是其他文件:

ViewModel.js

"use strict";

function ViewModel() {
    var self = this;
    self.name = ko.observable().extend({required: true});
};

ko.components.register('name-component', {
    viewModel: ViewModel,
    template: '<label>Name</label>\
                <input type="text" data-bind="value: name">\
                <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>'
});

webpack.config.js

var webpack = require('webpack'),
    path = require('path');


module.exports = {
  context: path.join(__dirname, 'App'),
  entry: './main.js',
  output: {
    path: path.join(__dirname, 'Built'),
    filename: '[name].bundle.js'
  },
  module: {
    loaders: [
      { test: /\.html$/, loader: 'html-loader'},
      { test: /\.js$/, loader: 'babel-loader'}
    ]
  }
};

关于javascript - 与 WebPack 捆绑时 knockout 验证中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34002558/

24

4

0

文章推荐： css - 固定背景大小在移动版 chrome 中不起作用

文章推荐： javascript - 如何设置 Meteor Insert AutoForm 将数据插入集合？

文章推荐： javascript - 来自 csv 数据的 X 轴时间刻度

文章推荐： javascript - React JS 的 FB.Canvas.setAutoGrow() 问题

knockout.js - ES5 knockout 到 ES6 knockout
我想认真学习更多关于 ES6 的知识。我一直在网上做一些例子，虽然我得到了大部分例子，但有时我什至不知道从哪里开始。请注意，我对这个 ES6 和 Knockout 的东西 super 菜鸟，想通过从他
knockout.js - knockout.mapping - 将包含嵌套对象的整个对象转换为 knockout.observable
我正在使用 knockout.mapping 将我的 javascript 对象转换为可观察到的 knockout 。在这个 javascript 对象内部是一个嵌套对象，并且这个嵌套对象正在被转换，
knockout.js - 剑道 knockout : use knockout view model with kendo datasource
我正在用 Kendo、Knockout 和 kendo-knockoutjs 库做一些实验。我想将 knockout View 模型与剑道数据源一起使用，并将其绑定(bind)到剑道网格小部件。在剑
knockout.js - 现在当 jQuery.tmpl 被 knockout 时，Knockout 的默认模板引擎
有谁知道现在当 jQuery.tmpl is not being actively developed or maintained anymore 时 Knockout 的默认模板引擎会发生什么？ K
knockout.js - knockout 计算数组不更新
我面临一个问题，即添加新项目时计算的可观察数组未更新。 self.FilteredCityList = ko.computed(function() { var filteredCollectio
knockout.js - knockout 数组获取对象的不同值
我想对数组中的多个属性使用 this fiddle 中的 ko.utils.arrayGetDistinctValues，因此我将数组映射到我想要的两个属性的数组 viewModel.justCate
knockout.js - Knockout 的映射破坏了可观察的数组
我在使用 Knockout 的映射插件时遇到了一个奇怪的问题。如果我通过映射填充一个 observable 数组，我将无法迭代该数组或获取其长度，即使 UI 已正确更新，该数组似乎也是空的。你可以
knockout.js - knockout 和summernote不起作用
所以我试图让 knockout 与 summernote 打得很好。它并没有真正起作用。我意识到这是因为 Summernote 使用了而不仅仅是一个输入字段。我的绑定(bind)是这样的: ko.
knockout.js - knockout 手动订阅不会在下拉列表更改时触发
另一个我似乎无法找到帮助的 knockout 问题。我基本上是在尝试实现级联下拉列表。前几天我请求帮助了解如何解析我的复杂 JSON(它来自 cakePHP Controller 。前几天我收到的帮
knockout.js - knockout 映射插件更新数组中的单个项目
我在尝试使用映射插件将项目更新为 observableArray 的一部分时遇到问题。我有以下代码 accounts.list = ko.mapping.fromJS(@(Html.Raw(Mode
knockout.js - knockout 嵌套对象和括号
有几件事我不明白。根据 KO 文档(以及关于 SO 的许多帖子)，在查询和编写 observable 时应该使用括号。但是在绑定(bind)子属性时，在我看来，是否使用括号并不重要。 = 都返回
knockout.js - knockout 计算总和
我从 WCF 接收数据并将其绑定(bind)到表。我在这个论坛上得到了帮助，添加了一些计算字段，一切都很完美。我想在此表的页脚添加总计。我的页面的简单版本可以在 http://jsfiddle.net
knockout.js - Knockout - 在渲染过程中显示进度图像
我有一个使用 Knockout 显示过滤列表的页面。 View 模型有一个对象数组，以及一个使用 ko.utils.arrayFilter 来过滤数组的 ko.computed。有时过滤会变得非常复
knockout.js - knockout - 在呈现最后一项后执行代码
我正在使用 jquery quicksearch 来搜索由 knockout foreach 循环填充的表。需要启动快速搜索元素 foreach 结束后 . 我尝试了几种方法，但到目前为止都没有成功
knockout.js - knockout 选定项目更改
我正在尝试使用类似于 silverlight 中的数据表单的数据网格来创建数据表单功能。我有一个 div 来显示从网格中选择的项目: $('#readDate').attr('data-bind',
knockout.js - knockout 分页
我有一个带有分页功能的 View 模型，它维护 pageIndex 属性。 Viewmodel 有一个包含页面的页面数组。每个页面都有自己的 pageNumber 属性。我的 View 模型的分页代
knockout.js - knockout 未在单选按钮上设置初始真值
名称+复选框的单向绑定(bind)工作正常，但它最初不适用于单选按钮employeeTypeA，尽管它在viewmodel中的值为true，html显示单选按钮未设置，为什么会这样？
knockout.js - knockout 会根据自动映射的可观察对象创建一个空对象
我正在尝试解决ko映射的一个小问题。场景是我的ViewModel基本上是对象的集合。每个对象都是通过json调用创建的，方法是: var ViewModel = ko.observableArray(
knockout.js - knockout js中订阅和计算之间的区别
使用 computed 的主要区别是什么？函数和 subscribe在knockout.js 中的功能？最佳答案计算出的 observable 通常用于返回计算出的值。作为计算评估的一部分访问的任
knockout.js - knockout 验证禁用验证
我有带有项目验证的ko.observableArrays。用户可以将项目标记为已删除。将其标记为已删除时，我需要在该项目上禁用验证。您如何动态禁用验证？示例:http://jsfiddle.net

首页

博学

6Ren·AI

商城

javascript - 与 WebPack 捆绑时 knockout 验证中断