2013-01-21 2 views
2

나는이처럼 보이는 HTML 요소가 속성 :jQuery를 개편, 동적 추가 및 제거 HTML은

<div data-bind="attr: { 'data-text': hasText && textMessage }"></div> 

자바 스크립트를 내가 원하는 무엇

var viewModel = { 
    hasText: ko.observable(false), 
    textMessage: ko.observable() 
}; 

, 동적으로 추가하고 '데이터를 제거하는 것입니다 -text '속성에 넣고 값을 textMessage 속성으로 채 웁니다.

<div data-text='0' /> 

또는

<div data-text='1' /> 

가 어떻게 동적으로 제거하거나 속성을 추가하고 데이터로 채울 수 있습니다 :

지금, 그것은 부울 hasText && textMessage의 결과를 출력?

+0

hasText 일부 체크 박스 선택에 따라 다릅니 까? – Cris

+0

네, 달려있어 – Catalin

답변

3

당신은 당신의 data-text 속성이 바인딩 후 계산 관찰 속성을 생성해야합니다

<div data-bind="attr: { 'data-text': textAttr }">Div</div> 

데모 JSFiddle : 다음

var viewModel = { 
    hasText: ko.observable(false), 
    textMessage: ko.observable(), 
}; 
// the funny syntax is because viewModel is an object literal 
viewModel.textAttr = ko.computed(function(){ 
     // you need to return null or undefinied then KO won't the attribute 
     return viewModel.hasText() ? viewModel.textMessage() : null 
}); 

그리고 당신의 모양을 바인딩.

+0

훌륭합니다! 고맙습니다 – Catalin