使用 JsViews 按路径查找链接的 DOM 节点

Question

有没有一种简单的方法可以在链接的 JS 对象的属性路径中找到 DOM 节点？

例如，我有一些对象

<script type="text/javascript">
        model = {
            companyName : "JS Corporation",
            address : "",
            staff : [
                {
                    name : "Jack Brown",
                    position : "SW developer"
                },
                {
                    name : "John Dow",
                    position : "Big Boss"
                },
                {
                    name: "Billy Hill",
                    position : ""
                }   
            ]
        } 

    </script>

和模板

    <!-- TEMPLATE -->
    <script  type="text/x-jsrender" id='companyTamplate'>
        <p>company name  <input data-link='companyName'></p>
        <p>address <input data-link='address'></p>
        <fieldset>
            <legend>Staff</legend>
            {^{for staff}}
                <div class='person'>
                    <p> name     <input data-link='name'>     </p>
                    <p> position <input data-link='position'> </p>
                </div>
            {{/for}}
        </fieldset>

    </script>       

并链接它们

$.templates('#companyTamplate').link('#companyView',model);

然后我将我的对象作为 JSON 发送到服务器并收到类似这样的验证错误

{
    errors : [
        {
            "path" : "address",
            "error" : "empty string"
        },
        {
            "path" : "staff[2].position",
            "error" : "empty string"
        }
    ]
}

我想突出显示地址和职位的输入字段。 为了突出显示地址字段，我可以导航到 输入[数据链接=地址]

但是当我在某个数组成员中出现错误时，它并不那么明显。

解决方法是在输入字段中添加一个具有完整路径的属性

<input data-link='position' data-link-path='staff[{{:#index}}].position' >

然后导航到

input[data-link-path="staff[2].position"]

但是很容易忘记添加附加属性。

有没有更简单的方法来解决这个问题？

Answer 1

从数据节点到视图或 DOM 节点不一定是一对一的映射。您可以有一对无或一对多（例如，如果您的模板中有两个 {^{for staff}} 标签）。

但是，如果您能够使用模板结构的知识，那么您可以导航视图层次结构并使用 API，例如 $.view() view.contents() view.childTags() 从数据返回到您想要的选定元素以编程方式执行。

例如，在您的示例中，以下获取“Billy Hill”“位置”输入的 jQuery 对象：

$.view().get(true, "array").views[2].contents(true, 'input[data-link="position"]')

如果您有两个 {^{for staff}} 块并且您想要导航到第二个块中的元素，您可以使用 childTags() API 来访问第二个：

$.view().childTags("for")[1].tagCtx.contentView.views[2].contents(true, 'input[data-link="position"]')

这再次将您带到“Billy Hill”的“位置输入”。

请参阅 View Hierarchy、$.view() 以及各种 view object 和 tag object API。