Html5 및 data- * 속성?</p> <pre><code><li class="user" data-name="Royi Namir" data-city="Boston" data-lang="js" data-food="Bacon"> </li> </code></pre> <p>내가 문서에 중복 문자 꽤 많이 추가 해요 :이 같은 코드를 가지고에서 HTML5의 데이터에 대한 모든 관련하여

Question

는

때문이다.

난 단지 수행하기 위해 data-XXX의이 유형을 필요

: 나는 쉽게이 (그 여분 data- 접두사없이이

<li class="user" dn="Royi Namir" dc="Boston" dl="js" df="Bacon"> </li> 

을 할 수

myDomElement.dataset[xxx];

을하지만, 및 나에게 많은 여분의 문자를 저장해라). 읽으려면 "start with " selector like [d^] – jQuery API

여기에 누락 된 자료가 있습니까?

Answer 1

당신은이를 사용할 수 있습니다

var user = $(element).data('user'); 

을 그리고 당신은 모든 사용자를 얻으려면 : jQuery를 사용

<li class="user" data-user='{"name":"Royi Namir", "city":"Boston", "lang":"js", "food":"Bacon"}'> </li> 

그리고

var user = JSON.parse(element.dataset.user); 

을, 심지어는 간단

var ​users = $('[data-user]').map(function(){return $(this).data('user')}); 

리던던시가 적고 직접 사용할 수있는 구조, 특히 더 깊은 속성이 있습니다. 데이터 속성은 문자열에만 적용되는 것이 아닙니다.

그러나 요점은 data-에 대한 연습을 정상화하는 것입니다. HTML을 볼 때 표준 HTML (보기) 속성은 어떤 속성이고 데이터 (응용 프로그램 논리에만 해당)는 어떤 속성인지 명확하게 알 수 있습니다.

Answer 2

당신이 꽤 많은 중복 문자를 추가하는 경우, 당신은 client-side MVC flavour에서 응용 프로그램을 리팩토링 할 수 있습니다 - 기본적으로 JSON으로 데이터를 전달하고, 템플릿을 통해 처리합니다.

data-* 속성은 멋지며 문서 표준을 준수하면서 DOM에 자료를 삽입 할 수 있지만 DOM 자체를 응용 프로그램의 데이터 레이어로 사용하는 데 의존한다면 강력히 상기 언급 한 내용 해결책.

Answer 3

가끔은 데이터 문자열을 모양 지정하는 것입니다 (예 : querystring).

<li class="user" data-cn="dn=Royi Namir&dc=Boston&dl=js&df=Bacon"> 

그리고 사용하여 객체에 그 변환 : 그것은 경향이 덜 오류 (등 아포스트로피에 대한 걱정)와 더 나은 읽을 이럴입니다

function getData(id,el){ 
    var data = el.getAttribute('data-'+id).split('&'), ret = {}; 
    data.map(
     function(a){ 
      var curr = a.split('='); 
      this[curr[0]] = curr[1]; 
      return a; 
     }, ret 
    ); 
    return ret; 
} 

.

jsFiddle