Question

您好我正在尝试在我的淘汰模板中使用jQuery颜色选择器，这是我从http://labs.abeautifulsite.net/jquery-miniColors/获得的颜色选择器。我有一个标签选择器（有3个淘汰模板），它旋转通过每个模板，因为用户选择了由淘汰赛完成的标签，颜色选择器出现在第一个，但当我浏览标签时，它没有添加颜色其余两个中的选择器，即使我在经过所有选项卡（最初工作的位置）后返回原始选项卡。

我在控制台中没有出现任何错误，但即使我尝试从淘汰模板（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>

Answer 1

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

这是您需要的绑定功能：

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: {}" />

希望这有帮助

拾色器在knockoutJS模板选项卡中不起作用

1 个答案: