gpt4 book ai didi

JQuery Mobile 和 Knockout 集成 - slider 已创建但不起作用

转载 作者:行者123 更新时间:2023-12-01 00:28:01 24 4
gpt4 key购买 nike

基本问题是在 Knockout 模板中从 JQuery Mobile 创建的 slider 无法运行。 slider 不滑动。

我创建了以下 jsFiddle 示例来说明我的问题:

http://jsfiddle.net/fdoub/YEUgw/ -- 带有颜色的 slider 不起作用 http://jsfiddle.net/fdoub/YEUgw/1/ -- 我想出的解决方法

我检查了其他 stackoverflow 帖子,但没有找到任何解决方案。我尝试过 knockout 绑定(bind)处理程序和 JQuery mobile .refresh 但没有成功。

这是我的第一篇 stackoverflow 帖子,所以如果我做得不够完美,请保持温和。

非常感谢您提供的所有宝贵建议。

非工作示例:

<!DOCTYPE html>
<html>
<head>
<title>Slider Problem</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h4>Slider Sample</h4>
</div>
<div data-role="content">
<p>Working Slider</p>
<select name="slider" class="flip-a" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<span>Label Value</span>
<br />
<br />
<span>Non-Working Sliders</span>
<div data-bind="foreach:colors" style="visibility: visible;">
<select name="slider" class="flip-a" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<span data-bind="text:$data"></span>
<br />
</div>
<script type="text/javascript">
$('#page1').on('pageinit', function () {
var viewModel = {
colors: ko.observableArray(["Green", "Blue", "Red"]),
};
ko.applyBindings(viewModel);
});
</script>
</div>
</div>
</body>
</html>

通过将 javascript 更改为

使其工作
<script type="text/javascript">
//turn off slider creation
$.mobile.slider.prototype.options.initSelector = ".nosliders";

$('#page1').on('pageinit', function () {
var viewModel = {
colors: ko.observableArray(["Green", "Blue", "Red"]),
};
ko.applyBindings(viewModel);

//manually create sliders
$(".flip-a").slider({
create: function(event, ui) { }
});
});
</script>

最佳答案

我不是 Knockout 方面的专家,但你可以像这样创建一个绑定(bind)处理程序:

 ko.bindingHandlers.jSlider = {
init: function(element) {
$(element).slider({ create: function(event, ui) { }});
}
};

然后每个带有 data-bind="{jSlider:true}"的元素都会调用 init 方法并创建 slider 。

查看 this了解更多信息。

关于JQuery Mobile 和 Knockout 集成 - slider 已创建但不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13747534/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com