1

こんにちは、ノックアウト テンプレート内で jQuery カラー ピッカーを使用しようとしています。これはhttp://labs.abeautifulsite.net/jquery-miniColors/から取得したカラー ピッカーです。ユーザーがノックアウトによって行われたタブを選択し、カラー ピッカーが最初のタブに表示されると、タブ セレクター (3 つのノックアウト テンプレートがあります) が各テンプレートを循環しますが、タブを通過しても色が追加されません。すべてのタブ（最初に機能していた場所）を通過した後に元のタブに戻っても、残りの2つのピッカー。

コンソールにエラーは表示されませんが、ノックアウト テンプレート (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 に答える