顏色選擇器不工作在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模板標籤

回答

相關問題