1

嗨，我正在尝试在我的淘汰赛模板中使用 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>
4

1 回答 1

2

您需要为敲除映射创建绑定。我正在使用相同的颜色选择器并让它工作。无法告诉您这是否是最佳解决方案，因为这是一种反复试验。我对淘汰赛不是很熟悉，但它确实有效。

这是您需要的绑定功能：

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-18T15:46:29.793 回答