关键词：
【中文标题】KnockoutJS 设置 jQuery Mobile 滑块的最大选项【英文标题】：KnockoutJS set max option of jQuery Mobile slider 【发布时间】：2015-02-13 20:51:30 【问题描述】：我的 Jquery Slider 与 Knockout JS 结合使用时有一个小问题 我想通过可观察值绑定滑块最大选项。
这是我的滑块类：
<div>
<label for="Range1Slider">GRP:</label>
<input type="range" name="Range1Slider" id="Range1" data-track-theme="c" min="10" max="200" step="10" data-bind="value: value1, slider: value1" />
</div>
和我的 bindingHandler 用于获取和设置滑块值：
ko.bindingHandlers.slider =
init: function (element, valueAccessor)
// use setTimeout with 0 to run this after Knockout is done
setTimeout(function ()
// $(element) doesn't work as that has been removed from the DOM
var curSlider = $('#' + element.id);
// helper function that updates the slider and refreshes the thumb location
function setSliderValue(newValue)
curSlider.val(newValue).slider('refresh');
// subscribe to the bound observable and update the slider when it changes
valueAccessor().subscribe(setSliderValue);
// set up the initial value, which of course is NOT stored in curSlider, but the original element :\
setSliderValue($(element).val());
// subscribe to the slider's change event and update the bound observable
curSlider.bind('change', function ()
valueAccessor()(curSlider.val());
);
, 0);
,
update: function (element, valueAccessor)
var newValue = ko.utils.unwrapObservable(valueAccessor());
if (isNaN(newValue)) newValue = 0;
var curSlider = $('#' + element.id);
// helper function that updates the slider and refreshes the thumb location
function setSliderValue(newValue)
curSlider.val(newValue).slider('refresh');
;
【问题讨论】：
【参考方案1】：html:
<div>
<label for="Range1Slider">GRP:</label>
<input type="range" name="Range1Slider" data-bind="slider: theme: 'c', min: 10, max: yourObservable, step: 10 " />
</div>
自定义绑定：
ko.bindingHandlers.slider =
init: function(element, valueAccessor, allBindings, viewModel, bindingContext)
var options = ko.unwrap(valueAccessor()),
valueObservable = allBindings().value;
// to your init work for the slider-plugin
// maybe the following ?
$(element).slider(options);
// logic for element-disposal should be implemented
,
update: function(element, valueAccessor, allBindings, viewModel, bindingContext)
var options = ko.unwrap(valueAccessor()),
valueObservable = allBindings().value;
// this will be called if the value-binding changed or the max-observable changed
// update the max-option
// maybe the following ?
$(element).slider('max', options.max());
;
【讨论】：
非常感谢，但我收到一个错误“滑块小部件实例没有这样的方法'max'”可能是什么？ $(element).slider('option', 'max', options.max()); 新年快乐:-) 新年好运。我已经尝试过您的更改，但仍然无法正常工作。得到一个新错误：无法在初始化之前调用滑块上的方法；试图调用方法'max'【参考方案2】：我现在有一个可行的解决方案。
它允许我从可观察到的淘汰赛中动态设置 jQuery 滑块选项，如“max”或“step”。
我还有一个问题。如何获取滑块值并将其绑定到我的 observable？
http://jsfiddle.net/AndyKay/dua7gkjo/
这是我现在的功能：
<div data-role="content">
<div>
<input data-bind="textinput: max"></input>
</div>
<div>
<input data-bind="textinput: step"></input>
</div>
<div>
<span data-bind="text: value1"></span>
</div>
<div>
<label for="Range1Slider">GRP:</label>
<input type="range" name="Range1Slider" data-bind="slider: value: value1, min: 10, max: max, step: step " />
</div>
</div>
<script type="text/javascript">
function ViewModel()
var self = this;
self.max = ko.observable(500);
self.value1 = ko.observable(50);
self.step = ko.observable(100);
ko.bindingHandlers.slider =
init: function (element, valueAccessor, allBindings, ViewModel, bindingContext)
var options = ko.unwrap(valueAccessor()),
valueObservable = allBindings().value;
//var value = ko.utils.unwrapObservable(valueAccessor());
//if (isNaN(value)) value = 0;
$(element).prop(
min: 0,
max: options.max(),
step: options.step(),
value: options.value()
).slider("refresh");
,
update: function (element, valueAccessor, allBindings, ViewModel, bindingContext)
var options = ko.unwrap(valueAccessor()),
valueObservable = allBindings().value;
$(element).prop('step', options.step());
$(element).prop('max', options.max());
$(document).on("pagecreate", function ()
ko.applyBindings(ViewModel);
);
</script>
【讨论】：
通过 Jquery Ajax 函数加载后不渲染 KnockoutJS 元素
】通过JqueryAjax函数加载后不渲染KnockoutJS元素【英文标题】：KnockoutJSelementsnotrenderedonceloadedviaJqueryAjaxfunction【发布时间】：2019-03-1307:45:16【问题描述】：我已经通过ajax加载了一个侧边栏，但是这个html使用knockoutJS来完全呈现。我... 查看详情
在子jQuery移动页面中初始化knockoutjs内容
】在子jQuery移动页面中初始化knockoutjs内容【英文标题】：Initializingknockoutjscontentinchildjquerymobilepage【发布时间】：2013-04-3014:48:19【问题描述】：我知道有很多问题涉及jquerymobile/knockoutjs集成，但是我找不到解决我问题的线程。我... 查看详情
将 jquery ui 对话框与 knockoutjs 集成
】将jqueryui对话框与knockoutjs集成【英文标题】：integratingjqueryuidialogwithknockoutjs【发布时间】：2012-01-2612:49:36【问题描述】：我正在尝试为jqueryui对话框创建knockoutjs绑定，但无法打开对话框。对话框元素已正确创建，但似乎有displa... 查看详情
使用 jquery-ui datepicker 的 knockoutjs 数据绑定
】使用jquery-uidatepicker的knockoutjs数据绑定【英文标题】：knockoutjsdatabindwithjquery-uidatepicker【发布时间】：2011-09-1722:48:26【问题描述】：我正在使用jQueryUI日期选择器。它后面的HTML输入字段目前作为dependentObservable挂接到KnockoutJS，但... 查看详情
使用 Knockoutjs 获取设置值属性
】使用Knockoutjs获取设置值属性【英文标题】：GetsetvalueattributewithKnockoutjs【发布时间】：2019-02-1906:42:06【问题描述】：我有一个输入标记和输入值，即Knockoutjs函数。我想获取该输入的值并放入facebooksharedata-href属性，请您帮忙。... 查看详情
我应该花精力实现 knockoutjs 还是研究 jQuery Data Link [关闭]
】我应该花精力实现knockoutjs还是研究jQueryDataLink[关闭]【英文标题】：ShouldispendmyeffortimplementingknockoutjsorlookintojQueryDataLink[closed]【发布时间】：2011-05-1120:18:48【问题描述】：我最近在客户端Web开发中使用了SteveSanderson的淘汰赛js库h... 查看详情
KnockoutJS：设置 optionValue 打破“与”绑定
】KnockoutJS：设置optionValue打破“与”绑定【英文标题】：KnockoutJS:SettingoptionValuebreaks"with"binding【发布时间】：2014-11-2408:00:19【问题描述】：我想知道是否有人知道为什么这段代码会被破坏。当我删除返回productID的函数时... 查看详情
如何使用 KnockoutJS 和 JQuery UI 创建自动完成组合框
】如何使用KnockoutJS和JQueryUI创建自动完成组合框【英文标题】：HowtocreateanautocompletecomboboxwithKnockoutJSandJQueryUI【发布时间】：2020-04-0318:11:51【问题描述】：我一直在尝试根据thispost中接受的响应创建一个自动完成下拉菜单，但自动... 查看详情
使用 KnockoutJS 创建可重用组件
】使用KnockoutJS创建可重用组件【英文标题】：CreatingreusablecomponentswithKnockoutJS【发布时间】：2012-03-0106:14:41【问题描述】：一段时间以来，我一直在为项目创建可重用组件作为jQuery插件。我喜欢能够抽象出逻辑，并根据具体情况... 查看详情
knockoutjs 根据值有条件地设置图像 src
】knockoutjs根据值有条件地设置图像src【英文标题】：knockoutjsconditionallysetimagesrcdependingfromavalue【发布时间】：2016-03-2323:43:15【问题描述】：我想以某种方式根据我从js获得的名称值动态设置图像源。我尝试了类似的方法来设置特... 查看详情
识别 KnockoutJS 中的属性更改事件？
】识别KnockoutJS中的属性更改事件？【英文标题】：IdentifytheattributechangeeventinKnockoutJS?【发布时间】：2012-10-1209:36:29【问题描述】：KnockoutJS中有什么方法可以识别属性改变事件吗？我在jQuery中找到了解决方案：FiringeventonDOMattributec... 查看详情
jQuery 1.5.1 Sizzle 'cannot read property nodename' child '>' selector with knockoutjs
】jQuery1.5.1Sizzle\\\'cannotreadpropertynodename\\\'child\\\'>\\\'selectorwithknockoutjs【英文标题】：jQuery1.5.1Sizzle\'cannotreadpropertynodename\'child\'>\'selectorwithknockoutjsjQuery1.5.1Sizzle\'cannotreadpropertynod 查看详情
knockoutJS、requireJS 和 jQueryUI Datepicker 不能一起玩
】knockoutJS、requireJS和jQueryUIDatepicker不能一起玩【英文标题】：knockoutJS,requireJS,andjQueryUIDatepickernotplayingnicetogether【发布时间】：2013-09-0920:03:59【问题描述】：我正在尝试使用jquery-uiDatepicker创建一个自定义的knockoutJS绑定，如下所... 查看详情
knockoutjs经验总结
http://knockoutjs.com/documentation/introduction.htmlknockout的模式MVVM四大重要概念声明式绑定UI界面自动刷新依赖跟踪模版一些特点纯javascript类库可添加到web程序最上部简洁才25kb兼容任何主流浏览器采用行为驱动开发快捷键的设置方法settin... 查看详情
使用 knockoutjs 时 Chrome 中的 Maxlength 约束验证异常
】使用knockoutjs时Chrome中的Maxlength约束验证异常【英文标题】：MaxlengthconstraintvalidationoddityinChromewhenusingknockoutjs【发布时间】：2019-01-2713:16:30【问题描述】：这里是jsfiddle<head><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery 查看详情
Knockoutjs - 在计算的 observable 中引用本地字段
】Knockoutjs-在计算的observable中引用本地字段【英文标题】：Knockoutjs-Referencelocalfieldsincomputedobservable【发布时间】：2017-05-2707:07:45【问题描述】：我是KO新手，无法让计算值正常工作。我有一个由许多对象组成的视图模型，因为我... 查看详情
分析jq.mobi和jquerymobile的区别
参考技术Ajqmobi是专门针对移动端产生的HTML5移动端框架，但是不包含UI，需要webapp那套要单独下载特点是很小压缩了只有几K大jQuerymobile也是正对移动端开发的框架他包含了UI一套。但是除开要加载jQuery以外还要加载他的移动框架J... 查看详情
电子书怎么转成mobi？
...后，我们将电子书格式文件或者文件夹添加到转换器中，设置一下要转换文件的路径。4、文件添加和路径设置好了之后，我们一键点击开始转换，这时文件就转换到你所设置得路径里面了。方法二：1、在浏览器中搜索“PDF在线... 查看详情