Question

我在Classnames for styling, data attributes for behavior中建议使用html data attributes代替jquery class name selectors的代码。这段代码工作正常。但是，它引用了javascript文件中的html5数据属性。

实施例

$("[data-role='show-alert']").click(function () {
//and
textValue = $("[data-role='employee-name-text']").val();

问题

避免在javascript文件中引用html5数据属性的最佳方法是什么？（通过使用模型或什么？）

注意：我使用的是 Kendo UI 框架。

头

<head>
    <title>HTML 5 Test</title>

    <script type="text/javascript" src="lib/kendo/js/jquery.min.js"></script>
    <script type="text/javascript" src="lib/kendo/js/kendo.web.min.js"></script>

    <script type="text/javascript">

        //CONTROLLER File  
        var textValue = '';

        function getEmployeeBusinessFunction() {

            var currentEmployeeName = textValue;
            alert(currentEmployeeName);
        }

    </script>

    <script type="text/javascript">
        $(document).ready(function () {


            $("[data-role='show-alert']").click(function () {

                //textValue = $('.myPersonTextbox').val();
                textValue = $("[data-role='employee-name-text']").val();

                //Call Business Function
                getEmployeeBusinessFunction();

            });

        });

    </script>

</head>

车身

<body>
    <form>
    <input type="text" class='myPersonTextbox' name="personName" placeholder="Employee Name" data-role='employee-name-text' />
    <button type="button" class='myButton' data-role='show-alert'>
        Add</button>
    </form>
</body>

参考

Answer 1

即使它们是HTML5的一部分，也可以使用thouse属性 - 这就是它们的用途。特别是如果没有预期的冲突。

如果您仍想摆脱命名冲突，可以使用带有选择器的命名空间，例如

$('myns\\:[data-role='show-alert']') 
...
<myns:button type="button" class='myButton' data-role='show-alert'>

避免选择与您的代码无关的HTML5属性。

如何改善此Javascript代码中的关注点分离？

1 个答案: