gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 23:37:32 24 4
gpt4 key购买 nike

我正在使用 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>

ma​​in.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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com