2013-04-11 2 views
0

안녕하세요, 내 knockout 템플릿 내에서 jQuery 색상 선택기를 사용하려고합니다. 색상 선택기는 http://labs.abeautifulsite.net/jquery-miniColors/에서 가져 왔습니다. 내가 탭 선택기 (3 녹아웃 템플릿을 가지고) 그것은 녹아웃에 의해 수행 된 탭을 선택하고 색상 선택 도구가 첫 번째에 나타납니다하지만 그것은 색상을 추가하지 않는 탭을 통과로 각 템플릿을 통해 회전 나머지 두 개의 선택기, 모든 탭 (원래 작동했던 곳)을 거쳐 원래 탭으로 돌아가더라도.색상 선택기가 knockoutJS 템플릿 탭에서 작동하지 않습니다

콘솔에서 아무런 오류가 없지만 작동하지 않는 녹아웃 템플릿 (2와 3) 내에서 자바 스크립트 경고를 보내더라도 오류가 발생합니다.

도움을 주시면 감사하겠습니다.

<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> 
+0

을하는 데 도움이

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

희망 :

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); } } }; 

이 당신이 그것을 사용하는 방법입니다 문제를 일으킨다. 관련 코드 부분을 사용하여 질문을 연장하십시오. 이상적인 JSFiddle은 실제 문제를 보여주는 가장 좋은 도구입니다. – nemesv

+0

온라인에 넣을 수없는 파일이 많기 때문에 JSFiddle에 연결할 수 없습니다. 위 코드 중 일부를 추가했습니다. 노드, 링크, 레이블 (이 순서대로 표시됨) –

답변

1

녹아웃 매핑을위한 바인딩을 만들어야합니다. 나는 같은 색상 선택기를 사용하고 있으며이 작업을 할 수 있습니다. 이것은 시행 착오의 한 종류이기 때문에 이것이 최선의 해결책인지는 알 수 없습니다. 나는 녹아웃에 익숙하지 않지만 작동한다.

당신은 바인딩 기능을 필요로한다 :이 무엇인지 알아 불가능 코드없이

관련 문제