2009-06-01 41 views
8

Tôi đang làm việc trên một ứng dụng web sử dụng ajax để giao tiếp với máy chủ. Tình huống cụ thể của tôi như sau:html & javascript: Cách lưu trữ dữ liệu tham chiếu đến các phần tử html

Tôi có danh sách người dùng xếp hàng trong trang html. Trên mỗi người dùng, tôi có thể làm như sau: thay đổi 'trạng thái' của họ hoặc 'xóa' chúng khỏi tài khoản.

một thực hành tốt để lưu trữ thông tin trong trang về sau là gì:

  • người dùng id
  • tình trạng hiện tại của người sử dụng

P.S .: Tôi đang sử dụng jQuery.

Trả lời

5

Có lẽ sử dụng thuộc tính tùy chỉnh, vì vậy cho các phần tử danh sách của người dùng, thêm thuộc tính cho các biến:

<li uid="theuserid" ustatus="thestatus"></li> 

Các giá trị sau đó có thể được nhận với chức năng attr:

$("li").attr("uid") 

$("li").attr("ustatus") 

Lưu ý: Bộ chọn wil l cần được thay đổi, rõ ràng là

Xin lưu ý rằng có nhiều ý kiến ​​khác nhau về việc sử dụng thuộc tính tùy chỉnh - tuy nhiên, điều này sẽ ổn cho mọi trình duyệt chính. Nó cũng là giải pháp ít phức tạp nhất mà tôi có thể nghĩ đến. Nó không yêu cầu nhảy đến các phần tử anh chị em để lấy dữ liệu, hoặc tìm các phần tử lân cận, tất cả có thể thêm một lượng nhỏ phí để xử lý - tôi cố gắng giảm thiểu số lượng bloat thừa mà tôi thêm vào DOM khi thực hiện những việc như vậy.

+1

Tuỳ chỉnh các thuộc tính làm việc, nhưng không tương thích với XHTML –

+1

Có, nhưng khi nó đi xuống đến nó, mà là mong muốn hơn - một cái gì đó mà làm việc, và khá nhanh chóng, hoặc cái gì đó là tuân thủ? – Kazar

+0

@activa và @Kazar Tại sao không tuân thủ và mong muốn với plugin siêu dữ liệu? –

1

Có nhiều cách khác nhau để thực hiện tùy thuộc vào loại dữ liệu bạn đang lưu trữ và lượng thông tin bạn đang lưu trữ trong trang nói chung. Tốt nhất là nên lập một kế hoạch nhất quán để bạn có thể viết một cuộc gọi thư viện đơn giản để thực hiện công việc. Ví dụ:

Bạn có thể lưu trữ dữ liệu trong lớp của một phần tử cụ thể. Điều này có thể yêu cầu các phần tử trình bao bổ sung để có thể cung cấp một lớp bổ sung để thúc đẩy CSS của bạn. Điều này cũng hạn chế định dạng nội dung có thể lưu trữ. ID người dùng cũng có thể vừa với thuộc tính lớp.

Bạn có thể lưu trữ dữ liệu trong một href chưa sử dụng của liên kết được kích hoạt Javascript. Điều này có tính năng bổ sung hiển thị dữ liệu trong thanh trạng thái như một phần của URL khi di chuột qua. Ví dụ, bạn có thể lưu trữ '#userid' hoặc thậm chí chỉ là 'userid' trong href.

Bạn có thể lưu trữ dữ liệu trong các yếu tố bổ sung. Ví dụ, bạn có thể có một div lồng nhau với một lớp cho biết lưu trữ cũng kích hoạt CSS để đưa phần tử ra khỏi màn hình. Đây là sự hỗ trợ chung và mở rộng nhất mà bạn có thể sắp xếp trong trang.

Thay vì div lồng nhau, bạn cũng có thể sử dụng thẻ nhập lồng nhau có loại = "ẩn". Đây là loại dự kiến ​​/ truyền thống hơn và không yêu cầu CSS đưa chúng ra khỏi màn hình. Bạn có thể sử dụng thuộc tính id để xác định các đầu vào này hoặc bạn có thể sử dụng vị trí trên trang. Ví dụ: đặt chúng bên trong liên kết mà người dùng nhấp vào và sau đó chỉ cần tìm kiếm bên trong liên kết hiện tại trong trình xử lý onclick.

5

jQuery liệu

Nếu bạn muốn lưu trữ dữ liệu tùy chỉnh chống lại một đối tượng jQuery, sử dụng data function.

$('#myField').data('name', 'Jack'); 
var name = $('#myField').data('name'); 

HTML5 đĩa dữ liệu * Các thuộc tính

Bạn cũng có thể sử dụng các thuộc tính HTML5 data-*, mặc dù các API để truy cập vào những chỉ được hỗ trợ một phần bởi các trình duyệt khác nhau. Here's some more information about that.

<div data-userid="123" class="user-row"> 

lập trình:

$('#myElement').attr('data-fruit', 'apple'); 
// or 
document.getElementById('myElement').dataset.fruit = 'apple'; 

Hidden Fields

Nếu bạn muốn làm mọi thứ theo cách trình duyệt tương thích cũ và các công cụ siêu dữ liệu trực tiếp vào html của bạn, bạn có thể sử dụng các trường ẩn . Đó là một chút cruder nhưng dễ dàng, đủ để làm.

<input type="hidden" name="UserID" value="[userid]" /> 

Bạn có thể dễ dàng sử dụng jQuery selectors để truy vấn danh sách của bạn và tìm khối html có chứa mục người dùng mà có lĩnh vực tiềm ẩn có liên quan phù hợp với các siêu dữ liệu bạn đang truy vấn cho.

+0

Tôi đồng ý ... nếu trong vùng đất JavaScript, hãy sử dụng hàm dữ liệu jQuery. Nếu trong vùng đất HTML thuần túy, phương pháp này tốt hơn các thuộc tính HTML có tiền tố hoặc dữ liệu tùy chỉnh, vì chúng không được hỗ trợ hoàn toàn trên các trình duyệt. Thêm vào đó, họ bốc mùi. Thẻ đầu vào ẩn là một giải pháp crappy, nhưng nó có lẽ là giải pháp tốt nhất - và vẫn tuân thủ XHTML. – BMiner

17

Có jQuery chức năng dữ liệu

$('li').data('userid',uid); // sets the value of userid 
uid = $('li').data('userid'); // retrieves the value of userid 

tài liệu chính thức: http://docs.jquery.com/Data

+7

Trong khi tôi đồng ý rằng chức năng dữ liệu là một phương pháp lưu trữ dữ liệu tốt đẹp trong các phần tử dom đó, vẫn có vấn đề về việc đưa dữ liệu đó lên jquery ở vị trí đầu tiên từ máy chủ. – Kazar

+1

Đó cũng là mối quan tâm của tôi ... Tôi vẫn cần một cách để 'xác định' phần tử dom để tôi có thể đính kèm dữ liệu. Ngoài ra, tôi tin rằng tôi cần phải giữ một cấu trúc javascript riêng biệt để lưu trữ tất cả các giá trị ban đầu. – Dan

+1

Ok, tôi đã không nhận ra phạm vi của vấn đề của bạn. Hãy xem câu trả lời của TM. – Rob

2

Trong trường hợp này, tôi nghĩ rằng thuộc tính tùy chỉnh có thể là quá mức cần thiết. Bạn có thể lưu trữ id người dùng trong thuộc tính id vì sẽ chỉ có một phiên bản của người dùng trong danh sách, đúng không? Ngoài ra, trạng thái của người dùng có thể được lưu trữ trong thuộc tính lớp. Bằng cách này, mỗi người dùng có thể được cung cấp kiểu dáng khác nhau trong CSS, chẳng hạn như màu xanh lá cây cho hoạt động, màu vàng cho tài khoản không kích hoạt và màu đỏ cho tài khoản bị tạm ngưng.

Mã để tìm nạp trạng thái sẽ phức tạp hơn một chút so với sử dụng thuộc tính tùy chỉnh (Nhưng chỉ khi bạn cũng muốn có nhiều lớp). Trên một lưu ý tích cực hơn, HTML sẽ xác nhận hợp lệ với phương pháp này trong khi nó sẽ không có thuộc tính tùy chỉnh.

<ul id="userList"> 
    <li id="uid123" class="active">UserName X</li> 
    <li id="uid456" class="suspended">Mr. Troll</li> 
</ul> 

/** 
* Simple function for searching (strict) for a value in an array 
* @param array arr The array to look in 
* @param mixed val The value to look for in arr. Note that the value is looked for using strict comparison 
* @return boolean true if val is found in arr, else false 
*/ 
function searchArray(arr, val) { 
    for(var i = 0, len = arr.length; i < len; i++) { 
     if(arr[i] === val) { 
      return true; 
     } 
    } 
    return false; 
} 

/** 
* Gets a known status from a string of class names. Each class name should be separated 
* by a space. 
* @param string classNames The string to check for a known status 
* @return string|false The status if found in classNames, else false 
*/ 
function getStatus(classNames) { 
    // The different statuses a user can have. Change this into your own! 
    var statuses = ['active', 'suspended', 'inactive'], 
     nameArr = classNames.split(" "); 
    for(var i = 0, nameLen = nameArr.length; i < nameLen; i++) { 
     // If we find a valid status among the class names, return it 
     if(searchArray(statuses, nameArr[i])) { 
      return nameArr[i]; 
     } 
    } 
    return false; // We didn't find any known status in classNames 
} 

var id = $("li").attr("id"); // Fetches the id for the first user 
var status = getStatus($("li").attr("class")); // Fetches the status of the first user 
+0

Tại sao tôi bị bỏ phiếu? Mã hoạt động, và tôi đã cung cấp một hàm để trích xuất trạng thái từ thuộc tính lớp ngay cả khi các lớp khác có mặt ... NẾU đó không phải là mong muốn, thì chỉ cần loại bỏ hàm getStatus. – PatrikAkerstrand

+0

Bạn không thể kiểm tra tính hợp lệ của trạng thái ở phía máy khách. Bạn có thể sử dụng CSS để cung cấp các dấu hiệu trực quan về một trạng thái thích hợp, vì bạn đã sử dụng các thuộc tính lớp. Nhưng javascript của bạn về cơ bản là vô dụng. – Rob

+1

Điều tương tự cũng có thể nói về bất kỳ giải pháp cụ thể nào ở đây. Không quan trọng nếu trạng thái được lưu trữ trong thuộc tính lớp hoặc thuộc tính tùy chỉnh. Nó vẫn phải được xác nhận ở phía máy chủ. Ý tôi là nó sẽ trích xuất trạng thái "đã biết" từ một chuỗi tên lớp. Tôi không phải là người nói tiếng Anh bản địa, vì vậy tôi đoán đó là một từ ngữ không may trong bài viết của tôi. – PatrikAkerstrand

1

Để trả lời câu hỏi "làm thế nào để có được nó vào trong document ở nơi đầu tiên", tôi đề nghị một cách bố trí tương tự như sau:

<ul id="users"> 
    <li id="someUserId" class="someStatus">Some Username</li> 
    <li id="someOtherUserId" class="someOtherStatus">Some Username</li> 
</ul> 

này cho phép bạn dễ dàng chọn nhiều thông tin về người dùng của bạn:

$('#users > li') // all user elements 
$('.someStatus') // all users of a particular status 

Sau đó, trong xử lý sự kiện của bạn nó cũng dễ dàng để có được tình trạng hiện tại:

$(this).attr('class') //get current status once you have a user element selected. 

Một giải pháp khác là đưa javascript vào trang và chỉ cần sử dụng chức năng jquery data để lưu trữ dữ liệu ngay khi tải trang. Bạn vẫn cần một id trên phần tử để tìm ra một cái đúng.

2

Plugin metadata để jquery là câu trả lời của bạn.

<html > 
<head> 
<script src="/js/jquery-1.3.2.js"></script> 
<script src="/js/jquery.metadata.js"></script> 
</head> 
<body> 
<ul> 
<li type="text" class="{UID:'1',status:'alive'}">Adam</li> 
<li type="text" class="{UID:'2',status:'alive'}">Bob</li> 
<li type="text" class="{UID:'3',status:'alive'}">Carol</li> 
</ul> 
<script> 
$('li').each(function(){window.console.log($(this).metadata().UID)}); 
</script> 
</body> 
</html> 
8

Có rất nhiều cuộc tranh luận về những gì tốt nhất để sử dụng. Bạn có thể lưu trữ dữ liệu rất nhiều cách, và tất cả đều làm cho ai đó hạnh phúc - tất nhiên thuộc tính tùy chỉnh sẽ không xác thực nếu bạn sử dụng XHTML và sử dụng lớp để lưu trữ một hoặc hai bit dữ liệu là vụng về nhất và chỉ tệ hơn với số lượng những điều bạn muốn biết. Cá nhân, không chỉ tôi không phải là một fan hâm mộ lớn của XHTML, tôi cũng không nhiều của một nazi xác nhận, vì vậy tôi khuyên bạn nên đi với các thuộc tính tùy chỉnh.

Tuy nhiên, có một tùy chọn điều chỉnh thuộc tính tùy chỉnh với các tiêu chuẩn: data- thuộc tính. Như John Resig (tác giả của jQuery) writes about in his blog, đây là thuộc tính mới được giới thiệu trong HTML5 cho phép bạn chỉ định custom data attributes với tiền tố data-. Vì vậy, một yếu tố hoàn toàn hợp lệ có thể trông như thế này:

<ul> 
    <li data-userid='5' data-status='active'>Paolo Bergantino</li> 
</ul> 

này có xu hướng tăng trong khi bạn vẫn đang sử dụng tùy chỉnh các thuộc tính mà thể là xấu nếu bạn đang sử dụng XHTML, mã của bạn sẽ còn rất tốt như đây là cách chúng tôi sẽ lưu trữ dữ liệu liên quan đến một mục cụ thể trong tương lai.

Một số đọc thêm là Attributes > Classes: Custom DOM Attributes for Fun and Profit.

Các vấn đề liên quan