JQuery Mobile和Knockout集成 - 滑塊已創建，但不起作用

基本問題是從Knockout模板中的JQuery Mobile創建的滑塊不起作用。滑塊不滑動。JQuery Mobile和Knockout集成 - 滑塊已創建，但不起作用

我已經創建瞭如下的jsfiddle例子來說明我的問題：

http://jsfiddle.net/fdoub/YEUgw/ - 滑塊與顏色不起作用 http://jsfiddle.net/fdoub/YEUgw/1/ - 我想出了

解決方法我已經檢查其他計算器職位，找不到任何解決方案。我嘗試過淘汰賽bindingHandlers和JQuery移動.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>

來源

2012-12-06 Faith Doub

我在淘汰賽不是expered但你可以創建這樣一個bindinghandler ：

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

然後，每個包含data-bind =「{jSlider：true}」的元素都將調用init方法並創建滑塊。

檢查出this欲知更多信息。

來源

2012-12-07 10:47:58

是的，使用像這樣的自定義綁定是在這種情況下繼續進行的最佳方式。但是，您的示例中存在一個小錯誤：綁定應該如下所示：data-bind =「jSlider：true」。 – vtosh

JQuery Mobile和Knockout集成 - 滑塊已創建，但不起作用

回答

相關問題