2014-07-22 1 views
1

내 HTML 파일에서 이러한 종류의 코드를 발견했습니다.이 data-bind 속성과 해당 values (예 : visible: tabs.active().value === 'sourceXml')이 무엇인지 이해하고 싶습니다. 여기서 뭐하는거야? 어느 누구도 친절하게 설명합니다.Jquery html 데이터 바인딩 속성의 사용

1) data-bind 특성을 명확히

<div style="border: solid #ddd; border-width: 0 1px 1px 1px; padding: 16px 12px 8px 12px; margin-top: -20px"> 
    <div data-bind="visible: tabs.active().value === 'sourceXml'"> 
    <div data-bind="template: { name: 'sourceXml', data: sourceXml }"></div> 
</div> 

<div data-bind="visible: tabs.active().value === 'searchTerms'"> 
    <div data-bind="template: { name: 'searchTerms', data: searchTerms }"></div> 
</div> 

<div data-bind="visible: tabs.active().value === 'outputFormat'"> 
    <div data-bind="template: { name: 'outputFormat', data: outputFormat }"></div> 
</div> 

<div data-bind="visible: tabs.active().value === 'savedQueries'"> 
    <div data-bind="template: { name: 'savedQueries', data: savedQueries }"></div> 
</div> 
</div> 

답변

2

JQuery와 아니다 - 그것이 HTML5)이 (source를 knockout.js가 거의 배타적 속성이다. 데이터 바인딩을 통해 knockout.js는 변수를 DOM 요소와 쉽게 연결하고, 템플릿 스키마를 적용하거나, 조건부 스타일을 적용 할 수 있습니다.

jQuery에는 data 요소의 액세스를 허용하는 유사한 이름의 .data() 메서드가 있지만 이는 data-bind과 동일하지 않습니다.

.data() 방법에 대한 jQuery Docs 세부 더

,하지만 (강조 광산) "jQuery를 1.4.3 HTML5 데이터 -의 등이 자동으로 jQuery의 데이터 객체에서 가져온 것이다 속성"있습니다. 이것은 data-binding과 관련이 없습니다. jQuery에서 data-binding을 사용하면 특별한 효과가 없습니다.


점은 무엇입니까?

2) "visible"및 "template"비트는 knockout.js가 바운드 데이터와 관련되어 있어야하는 것을 설명합니다. 예를 들어 하나의 옵션이 많이 이해하기 쉬운 하나의 text (source)입니다 있습니다 기본적으로 우리가 페이지에 변수 myString 한 번 템플릿을로드 knockout.js 적용하기 위해 준비하고있다

<div>My favorite string is: <span data-bind="text: myString"></span></div> 

.

대하여 visible 워드 프로세서 말, (source) "가시 바인딩 관련 DOM 요소는 결합 패스 값에 의해 숨겨 지거나 가시가시킨다".

마찬가지로 template는, 그래서 예를 사용하고있는 템플릿 검사된다 (source)

"템플릿 렌더링 결과에 관련 DOM 요소를 채우는"는 div 그것을 구축하고 다른 "사용하지 않는"템플릿을 숨기면서 표시합니다.

관련 문제