Knockout.js如何在链接中包含data-page="text: details"属性

Nice question! Let's cover the common scenarios for adding that data-page="text: details" attribute to your links, since the approach depends on how you're building them:

1. Pure HTML (or Markdown that supports embedded HTML) #

If you're writing straight HTML, or using a Markdown parser that allows inline HTML (like GitHub Flavored Markdown), you can add the attribute directly to the <a> tag:

<a href="/your-target-url" data-page="text: details">Your Link Text</a>

Markdown doesn't natively support custom attributes in its link syntax ([text](url)), so embedding the full HTML tag is the way to go here. The data-* prefix is valid HTML5 for custom data attributes, so this will work across all modern browsers.

2. Dynamically creating links with JavaScript #

If you're generating links via JS, you have two reliable options:

Using dataset (recommended)

The dataset property lets you interact with data-* attributes without writing the full attribute name:

// Create the link element
const myLink = document.createElement('a');
myLink.href = '/your-target-url';
myLink.textContent = 'Your Link Text';
// Set the custom data attribute
myLink.dataset.page = 'text: details';
// Add it to the DOM
document.getElementById('some-container').appendChild(myLink);

Using setAttribute

Alternatively, you can use the generic setAttribute method:

myLink.setAttribute('data-page', 'text: details');

Both methods work, but dataset is cleaner for handling data-* attributes specifically.

3. Framework-specific (Vue/React) #

If you're using a frontend framework, the syntax is slightly adjusted but straightforward:

Vue.js

Use Vue's attribute binding syntax (:) to set the custom attribute:

<a :href="yourUrlVariable" :data-page="'text: details'">Your Link Text</a>

The quotes inside the binding are important here to pass the string literal correctly.

React

React supports data-* attributes directly in JSX, just like plain HTML:

<a href={yourUrlVariable} data-page="text: details">Your Link Text</a>

No matter which method you use, you can access the value later with JavaScript (e.g., element.dataset.page will return "text: details" if you need to use it in your code).

内容的提问来源于stack exchange，提问作者Kelster