颜色选择器不工作在knockoutJS模板标签

嗨我想在我的挖空模板中使用jQuery颜色选择器，我从http://labs.abeautifulsite.net/jquery-miniColors/得到的颜色选择器。我有一个选项卡（其中有3个淘汰赛模板），它通过每个模板旋转，因为用户选择淘汰赛完成的选项卡，颜色选择器出现在第一个模板上，但当我通过选项卡时，它不添加颜色其余两个选择器，即使我经过所有选项卡（原来工作的地方）后回到原始选项卡。颜色选择器不工作在knockoutJS模板标签

我在控制台中没有出现错误，但是即使我尝试从knockout模板（2和3）中尝试并执行无效的JavaScript警报。

任何帮助，将不胜感激。

<script id="Links" type="text/html"> 
    <div id="linksTemplate"> 
     <section class="well span7"> 
      <fieldset> 
       <legend>Links</legend> 
       <label class="inline"> 
        <span class="formLabel">Border Colour</span> 
        <input type="text" data-bind="value: settings.links.style.stroke" class="minicolors" data-control="saturation" /> 
       </label> 

       <label class="inline"> 
        <span class="formLabel">Border Width</span> 
        <input type="text" data-bind="value: settings.links.style.stroke_width" /> 
       </label> 
      </fieldset> 
     </section> 
    </div> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      alert('hello'); 
     }); 
    </script> 
</script>

来源

2013-04-11 Graham Barnes

没有任何代码就不可能找出什么是造成你的问题。请将您的问题扩展到相关的代码部分。理想情况下，一个简化的JSFiddle将是最好的显示你的实际问题。 – nemesv 2013-04-11 11:07:48

我无法链接到JSFiddle，因为有很多我无法上网的文件，我已经添加了一些上面的代码，有3个淘汰赛模板节点，链接，标签（按顺序出现） – 2013-04-11 11:16:04

您需要为挖空映射创建绑定。我使用相同的颜色选择器，并得到这个工作。不能告诉你这是否是最好的解决方案，因为这是一种试验和错误。我对淘汰赛不是很熟悉，但它很有用。

这是在绑定功能，你需要：

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

     var options = allBindingsAccessor().defaultSettings || {}; 

    var funcOnSelectColor = function() { 
     var observable = valueAccessor(); 
    observable($(element).minicolors("value")); 
} 
//-- also change event to hide 
options.hide = funcOnSelectColor; 

$(element).minicolors(options); 

//handle the field changing 
ko.utils.registerEventHandler(element, "change", funcOnSelectColor); 

//handle disposal (if KO removes by the template binding) 
ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
    $(element).minicolors("destroy"); 
}); 

}, 
update: function (element, valueAccessor) { 
    var value = ko.utils.unwrapObservable(valueAccessor()); 

    var current = $(element).minicolors("value"); 
    if (value - current !== 0) { 
    $(element).minicolors("value", value); 
    } 
} 
};

这是你如何使用它：

<input class="minicolors" data-position="default" style="padding: 2px; height: 20px;" data-bind="minicolors: MYKNOCKOUTBINDING, defaultSettings: {}" />

希望这有助于

来源

2013-05-18 15:46:29 zillabyte

颜色选择器不工作在knockoutJS模板标签

回答

相关问题