Fatal编程技术网
  • jquery/
  • Knockoutjs，jquery移动滑块

Knockoutjs，jquery移动滑块

jquery mobile knockout.js

Knockoutjs，jquery移动滑块,jquery,mobile,slider,knockout.js,Jquery,Mobile,Slider,Knockout.js,我想知道是否有人有一个使用knockoutjs的JQM滑块的工作示例。我有两个问题： 1） 将值绑定到可观察对象-我可以首先绑定它，即设置滑块的“值”，但拖动时不会更新基础可观察对象-我认为这与JQM将元素放在输入上表示它有关 2） 更改“最小”、“最大”和“值”属性时刷新样式 以下是我所拥有的内容的子集，currentItems根据选择进行更改： workloadViewModel.filterValues = ko.dependentObservable(function () { var

我想知道是否有人有一个使用knockoutjs的JQM滑块的工作示例。我有两个问题：

1） 将值绑定到可观察对象-我可以首先绑定它，即设置滑块的“值”，但拖动时不会更新基础可观察对象-我认为这与JQM将元素放在输入上表示它有关

2） 更改“最小”、“最大”和“值”属性时刷新样式

以下是我所拥有的内容的子集，currentItems根据选择进行更改：

workloadViewModel.filterValues = ko.dependentObservable(function () {
var tmp = {};
var itms = this.currentItems();

if (itms.length == 0) return;

tmp.max = itms[0].val;
tmp.min = itms[itms.length - 1].val;
tmp.minRange = this.minRange();

return tmp;
}, workloadViewModel);


ko.bindingHandlers.jqmRefreshSlider = {
update: function (element, valueAccessor) {
    ko.utils.unwrapObservable(valueAccessor()); //just to create a dependency
    try {
        $("input[type=range]").slider("refresh");            
    } catch (error) {
        trace("error refreshing slider");
    }
}
};

<div id="filters" data-bind="template: {name: 'filterTemplate', data: filterValues}, jqmRefreshSlider: filterValues"></div>

<script id='filterTemplate' type='text/html'>        

    <p>min: ${minRange}</p>
    <p>min: ${min}</p>
    <p>max: ${max}</p>
    <div>
        <input type="range" name="slider_min" id="slider_min" value="${minRange}" min="${min}" max="${max}" />
    </div>
</script>

workloadViewModel.filterValues=ko.DependentToServable（函数（）{
var tmp={}；
var itms=this.currentItems（）；
如果（itms.length==0）返回；
tmp.max=itms[0].val；
tmp.min=itms[itms.length-1].val；
tmp.minRange=this.minRange（）；
返回tmp；
}，workloadViewModel）；
ko.bindingHandlers.jqmRefreshSlider={
更新：函数（元素、值访问器）{
ko.utils.unwrapObservable（valueAccessor（））；//仅用于创建依赖项
试一试{
$（“输入[类型=范围]”）。滑块（“刷新”）；
}捕获（错误）{
跟踪（“错误刷新滑块”）；
}
}
};
最小值：${minRange}

最小值：${min}

最大值：${max}
非常感谢你能给我的任何帮助

J

这是与silder的工作绑定：

ko.bindingHandlers.slider = {
    init: function (element, valueAccessor) {
        var val = valueAccessor()();
        $(element).slider(
                            {
                                value: val,
                                step: 3,
                                slide: function (event, ui) {
                                    valueAccessor()(ui.value);
                                }
                            });
    },
    update: function (element, valueAccessor) {
        $(element).slider("option", "value", valueAccessor()());
    }
};
这是与silder的工作绑定：

ko.bindingHandlers.slider = {
    init: function (element, valueAccessor) {
        var val = valueAccessor()();
        $(element).slider(
                            {
                                value: val,
                                step: 3,
                                slide: function (event, ui) {
                                    valueAccessor()(ui.value);
                                }
                            });
    },
    update: function (element, valueAccessor) {
        $(element).slider("option", "value", valueAccessor()());
    }
};
我用JQM滑块咬牙切齿了几天。最后，我能够获得真正的双向绑定到滑块值的可观察对象，并让它更新thumb滑块和数字范围输入。以下是我的想法：

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);
    }
};
下面是它在HTML中的使用方式：

<input type="range" data-bind="value: currentLineWidth, slider: currentLineWidth" name="penSizeSlider" id="penSizeSlider" min="1" max="150" />
我也用这些信息更新了我的博客。关于集成Knockout和JQuery Mobile的更多信息可以在那里找到。

几天来，我一直在用JQM滑块咬牙切齿。最后，我能够获得真正的双向绑定到滑块值的可观察对象，并让它更新thumb滑块和数字范围输入。以下是我的想法：

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);
    }
};
下面是它在HTML中的使用方式：

<input type="range" data-bind="value: currentLineWidth, slider: currentLineWidth" name="penSizeSlider" id="penSizeSlider" min="1" max="150" />
我也用这些信息更新了我的博客。关于集成Knockout和JQuery Mobile的更多信息可以在那里找到。

由于滑块是动态添加的，因此上述操作对我都不起作用

<html>
 <head>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
 </head>
 <body>
  <span data-bind="text: test"></span>
  <br />
  <br />
  <div class="c-slider" >
  <!-- ko if: is -->
   <input id="test-i" type="range" min="1" max="10" data-bind="value: test, slider: test" />
  <!-- /ko -->

  </div>
  <input id="test-t" type="text"  data-bind="value: test" />
  <script type="text/javascript">

   function model() {
    var self = this;
    self.test = ko.observable("1");
    self.test.subscribe(function(v) {
    alert('s');
    $("#test-i").val(v).slider('refresh');
 });
self.is = ko.observable(true);
 }

 ko.bindingHandlers.slider = {
  init: function(element, valueAccessor) {
   var value = valueAccessor();
   $(document).on({
    "mouseup touchend": function (elem) {
     value($('#' + element.id).val());
    }
   }, ".c-slider");
  }
 };

 var m = new model();
 ko.applyBindings(m);
</script>
 </body>
</html>






函数模型（）{
var self=这个；
自测试=可观察到（“1”）；
self.test.subscribe（函数五）{
警报；
$（“#test-i”）.val（v）.slider（'refresh'）；
});
self.is=ko.可观察（真）；
}
ko.bindingHandlers.slider={
init：函数（元素、值访问器）{
var value=valueAccessor（）；
$（文件）({
“鼠标触摸端”：功能（elem）{
值（$（'#'+element.id）.val（））；
}
}“.c滑块”）；
}
};
var m=新模型（）；
ko.应用绑定（m）；
由于滑块是动态添加的，因此上述操作对我都不起作用

<html>
 <head>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
 </head>
 <body>
  <span data-bind="text: test"></span>
  <br />
  <br />
  <div class="c-slider" >
  <!-- ko if: is -->
   <input id="test-i" type="range" min="1" max="10" data-bind="value: test, slider: test" />
  <!-- /ko -->

  </div>
  <input id="test-t" type="text"  data-bind="value: test" />
  <script type="text/javascript">

   function model() {
    var self = this;
    self.test = ko.observable("1");
    self.test.subscribe(function(v) {
    alert('s');
    $("#test-i").val(v).slider('refresh');
 });
self.is = ko.observable(true);
 }

 ko.bindingHandlers.slider = {
  init: function(element, valueAccessor) {
   var value = valueAccessor();
   $(document).on({
    "mouseup touchend": function (elem) {
     value($('#' + element.id).val());
    }
   }, ".c-slider");
  }
 };

 var m = new model();
 ko.applyBindings(m);
</script>
 </body>
</html>






函数模型（）{
var self=这个；
自测试=可观察到（“1”）；
self.test.subscribe（函数五）{
警报；
$（“#test-i”）.val（v）.slider（'refresh'）；
});
self.is=ko.可观察（真）；
}
ko.bindingHandlers.slider={
init：函数（元素、值访问器）{
var value=valueAccessor（）；
$（文件）({
“鼠标触摸端”：功能（elem）{
值（$（'#'+element.id）.val（））；
}
}“.c滑块”）；
}
};
var m=新模型（）；
ko.应用绑定（m）；
以下内容对我很有用。它还处理动态创建的元素。不过有点黑。我重用了中的一些代码，用于自动将字符串解析为布尔值，反之亦然：

ko.bindingHandlers.jqmFlip = {
    init: function(element, valueAccessor, allBindingsAccessor) {

        var observable = valueAccessor(),
            interceptor = ko.computed({
                read: function() {
                    return observable().toString();
                },
                write: function(newValue) {
                    observable(newValue === "true");
                }
            });

        var result = ko.applyBindingsToNode(element, { value: interceptor });

        try {
            $(element).slider("refresh");
        } catch(x) {

            $(element).next('.ui-slider').remove();
            $(element).slider();
            /*console.log('jqmFlip init error ' + x);*/
        }
        return result;
    },
    update: function (element, valueAccessor) {

        ko.bindingHandlers.value.update.apply(this, arguments);
        var value = valueAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);
        try {
            $(element).slider("refresh");
        } catch(x) {
            debugger;
            console.log('jqmFlip update error ' + x);
        }
    }
};
以下几点对我有用。它还处理动态创建的元素。不过有点黑。我重用了中的一些代码，用于自动将字符串解析为布尔值，反之亦然：

ko.bindingHandlers.jqmFlip = {
    init: function(element, valueAccessor, allBindingsAccessor) {

        var observable = valueAccessor(),
            interceptor = ko.computed({
                read: function() {
                    return observable().toString();
                },
                write: function(newValue) {
                    observable(newValue === "true");
                }
            });

        var result = ko.applyBindingsToNode(element, { value: interceptor });

        try {
            $(element).slider("refresh");
        } catch(x) {

            $(element).next('.ui-slider').remove();
            $(element).slider();
            /*console.log('jqmFlip init error ' + x);*/
        }
        return result;
    },
    update: function (element, valueAccessor) {

        ko.bindingHandlers.value.update.apply(this, arguments);
        var value = valueAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);
        try {
            $(element).slider("refresh");
        } catch(x) {
            debugger;
            console.log('jqmFlip update error ' + x);
        }
    }
};
我想知道，通过“问题的一半”，你是否指绑定的不是所有滑块选项，如最小和最大。如果是这样，请告诉我你是否找到了一个解决方案，涵盖了所有问题。我想知道，通过“问题的一半”，你是否指绑定的不是所有滑块选项，如最小和最大。如果是这样，如果你找到了一个解决所有问题的方法，请告诉我。谢谢分享！对于其他网络noob，我要补充一点，您需要确保您的滑块输入设置了id。感谢分享！对于其他网络noob，我将补充一点，您需要确保您的滑块输入设置了id。