标签: custom-attribute

我可以将自定义属性添加到HTML标记,如下所示: __CODE__

最近我一直在阅读越来越多关于在HTML标签中使用自定义属性的人,主要是为了嵌入一些额外的数据用于javascript代码.

我希望收集一些关于是否使用自定义属性是一个好习惯的反馈,以及一些替代方案.

现在看来似乎真的可以简化既服务器端和客户端的代码,但它也不是W3C标准.

我们应该在我们的网络应用程序中使用自定义HTML属性吗？为什么或者为什么不？

对于那些认为自定义属性是好事的人:使用它们时要记住哪些事项？

对于那些认为自定义属性是坏事的人:你用什么方法来完成类似的事情？

更新: 我最感兴趣的是各种方法背后的推理,以及为什么一种方法比另一种更好的原因.我想我们都可以用4-5种不同的方式来完成同样的事情.(隐藏元素,内联脚本,额外类,从ids解析信息等).

更新2: 似乎HTML 5 data-属性功能在这里有很多支持(我倾向于同意,它看起来像一个可靠的选项).到目前为止,我还没有看到这个建议的反驳方式.使用这种方法是否有任何问题/陷阱？或者它只是对当前W3C规范的"无害"失效？

我注意到jquery的beta模板插件正在使用,类型属性为"text/x-jquery-tmpl"

例如

<script type="text/x-jquery-tmpl">

我以前没见过自定义使用type属性.有没有人看过当前使用过的这个例子,或者像我这样的凡人开发者可以在我们自己的代码中使用它？

我认为它是一种MIME类型,但我认为MIME类型支持取决于浏览器.所以我会假设不支持自定义MIME类型？

我刚才注意到,如果我给html元素一个自定义属性,例如:

<input type="button" id="my_button" custom_attr="custom_attr_text" value="value_text" />

然后我可以像这样检索它:

document.getElementById("my_button").getAttribute("custom_attr");

它会回来"custom_attr_text",但如果我这样做

document.getElementById("my_button").custom_attr;

然后它回来了undefined!

我还注意到,使用内置属性(例如value或id)以上两种工作都很好!有人可以解释为什么会这样吗？

我有一个数据绑定的asp.net RadioButtonList.呈现的列表项显然呈现为无线电类型,标签和跨度的输入.

当我遍历每个ListItem并添加onclick属性时,它会根据需要将onclick属性添加到输入标记.但是当我添加自定义属性时,它会将其添加到周围的跨度中.如何通过自定义ControlAdapter将其添加到输入标签而不更改RadioButtonList的呈现？我正在使用网站(不是项目)和.net 2.0.提前致谢!

ASP.NET

For Each li As ListItem In Me.rbl.Items
   li.Attributes.Add("onclick", "myFunction();")
   li.Attributes.Add("myAttribute", "1")
Next

HTML

<table id="ctl00_ContentPlaceHolder1_rbl" border="0">
    <tr>
        <td><span myAttribute="1"><input id="ctl00_ContentPlaceHolder1_rbl_0" type="radio"
          name="ctl00$ContentPlaceHolder1$rbl" value="Choice1" onclick="myFunction();" />
         <label for="ctl00_ContentPlaceHolder1_rbl_0">Choice1</label></span></td>
    </tr>
</table>

根据各种来源设置验证后，我无法启动客户端验证方法。经过一番努力，我发现更改脚本加载的顺序可以解决问题。我提供了一个答案来显示 ASP.NET Core 3.0 MVC 的“RequiredIf”自定义属性的完整设置。希望它能节省其他人的宝贵时间。

我有一个开关小部件，它使用自定义数据属性值来标记自身。

.switch.switch-text .switch-label::before {
  right: 1px;
  color: #c2cfd6;
  content: attr(data-hide);
  }
  
  .switch.switch-text .switch-label::after {
  left: 1px;
  color: #c2cfd6;
  content: attr(data-show);
  opacity: 0;
}

.switch.switch-text .switch-input:checked ~ .switch-label::before {
  opacity: 0;
}

.switch.switch-text .switch-input:checked ~ .switch-label::after {
  opacity: 1;
}

<label class="switch switch-text switch-pill switch-primary">
                            <input type="checkbox" class="switch-input" checked>
                            <span class="switch-label" attr.data-show="{{GLOBALS.ACTIONS.SHOW | translate}}" attr.data-hide="{{GLOBALS.ACTIONS.HIDE | translate}}"></span>
                            <span class="switch-handle"></span>
                        </label>

但它不起作用。我查看了与类似问题相关的不同答案，但有人说它有效，有人说它无效。如果我用户没有 attr。在前面我无论如何都会收到绑定错误，因为它无法识别该属性。

如何使用角度翻译来翻译自定义属性的值？

我有以下解析器，允许我检索有关当前用户公司的信息（companyId 作为自定义字段添加到 cognito 用户池中）。cognito 上的字段设置为可变的。

{ "version" : "2017-02-28", "operation" : "GetItem", "key": { "id" : $util.dynamodb.toDynamoDBJson($context.identity.claims.get("custom:companyId")) } }

——

这在使用 AWS AppSync 界面（登录后）时工作正常，如日志所示：

{ "errors": [], "mappingTemplateType": "Request Mapping", "path": "[getMyClientCompany]", "resolverArn": "arn:aws:appsync:eu-west-1:261378271140:apis/rue25cac6jc6vfbhvu32sjafqy/types/Query/fields/getMyClientCompany", "transformedTemplate": "{\n \"version\" : \"2017-02-28\",\n \"operation\" : \"GetItem\",\n \"key\": {\n \"id\" : {\"S\":\"0c1c81db-a771-4856-9a30-d11bf8e3cab1\"}\n }\n}", "context": { "arguments": {}, "source": null, "result": null, "error": null, "outErrors": [] }, "fieldInError": false }

——

但是当代码来自 Amplify-js 时不起作用：

{ "errors": [], "mappingTemplateType": "Request Mapping", "path": "[getMyClientCompany]", "resolverArn": "arn:aws:appsync:eu-west-1:261378271140:apis/rue25cac6jc6vfbhvu32sjafqy/types/Query/fields/getMyClientCompany", "transformedTemplate": "{\n …