변화는 스타일

나는이 같은 형태의 HTML이 변경 :변화는 스타일

<div> 
    <table> 
     <tr onclick="show();"> 
      <td class="cell">Click to open</td> 
     </tr> 
    </table> 
</div> 
<div style="display:none; position:absolute; left:150px" id="hiddenDiv"> 
    <table data-bind="with: someProperty"> 
     <tr onclick="hide();"> 
      <td class="cell" data-bind="text:message"></td> 
     </tr> 
    </table> 
</div> 
<input type="button" value="Color cells" onclick="colorCells()" />

을 그리고 내 자바 스크립트는 다음과 같습니다

function show() { 
     vm.someProperty(vm.list[1]); 
     $("#hiddenDiv").fadeIn("slow"); 
    } 
    function hide() { 
     $("#hiddenDiv").fadeOut("slow"); 
    } 
    function colorCells() { 
     $(".cell").css("background-color", "Yellow"); 
    } 

    function ViewModel() { 
     this.list = [new SubModel("item 1"), new SubModel("item 2")]; 
     this.someProperty = ko.observable(this.list[0]); 
    } 

    function SubModel(msg) { 
     this.message = msg; 
    } 

    var vm = new ViewModel(); 

    $(function() {  
     ko.applyBindings(vm); 
    });

가 나는 jsFiddle here을 설정합니다.

이제 버튼을 클릭하면 "셀"클래스가있는 모든 표 셀의 배경색을 변경해야합니다. 그러나 숨겨진 div가 보이지 않으면 보이게 될 때 배경색은 여전히 흰색입니다. 그 이유는 숨겨진 셀을 감싸는 "with"바인딩에서 사용되는 속성을 변경하기 때문인 것으로 보입니다. "with"로 바인딩 된 속성을 변경하면 해당 하위 항목의 스타일이 재설정됩니다.

(의미가 없으면 jsFiddle에서 버튼을 클릭 한 다음 "클릭하여 열기"셀을 클릭하십시오. "항목 2"가 강조 표시되지 않음을 유의하십시오. 이제 "클릭하여 열기"셀을 다시 클릭하면 "항목 2"가 더 이상 강조 표시되지 않습니다. 이제 show 함수에서 "someProperty"를 설정 한 행을 제거하고 실험을 반복하십시오. "항목 1"이 강조 표시되었습니다. 색 세포 단추를 클릭하면 표시되는지 여부에 관계없이 올바르게 표시됨)

이것은 의도적으로 설계된 것입니까? "with"가 사용하는 속성을 변경해도 스타일이 재설정되지 않도록 작업 방법이 있습니까?

출처

2012-04-13 Matt Burland

이 문제를 해결하는 올바른 방법 인 IMHO는 버튼의 클릭으로 변경할 수있는 관찰 가능 색상으로도 지정됩니다. 나는 갱신이있다 jsfiddle here

출처

2012-04-13 15:33:40

흠 ... 당신은 무언가에 있을지도 모른다. 내 실제 사례는 훨씬 더 복잡하지만 그 작업을 할 수 있다고 생각합니다. –

사실 jQuery.color() 플러그인을 사용하여 컬러 애니메이션을 사용하고 싶습니다. 뷰 모델 ko.observable 인 경우이를 수행 할 수 있을지 확실하지 않습니다. –

color() 플러그인을 사용하는 것과 같이 색상 애니메이션에 관련된 약간의 논리가있는 경우 색상을 ko.computed()로 간주하여 함수를 전달할 수 있습니다. 처형되다. 내가 가진 또 다른 제안은 View 모델 내부로 show(), hide() 및 colorCells() 메서드를 이동 한 다음 "Click"데이터 바인딩을 사용하여 ViewModel 메서드까지 연결하는 것입니다. 그런 식으로 데이터와 명령 로직이 모두 ViewModel에 포함되고 솔루션이 생성 된 knockoutjs를 기반으로 MVVM 패턴 정의와 비슷하게됩니다. –

대신 css 클래스를 변경하는 대신 css 클래스 'cell'자체를 변경하지 말고 작동하는지 확인하십시오.

출처

2012-04-13 15:27:41

변화는 스타일

답변

관련 문제