Найти связанные DOM-узлы по пути с помощью JsViews - PullRequest
Новая
       27

Найти связанные DOM-узлы по пути с помощью JsViews

0 голосов
/ 22 декабря 2018

Есть ли простой способ найти узлы DOM в пути свойств связанного объекта JS?

Например, у меня есть некоторый объект 

<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"
        }
    ]
}

Я хочу выделить поле ввода дляадрес и должность.Для выделения поля адреса я могу просто перейти на вход [data-link = address]

Но когда у меня возникает ошибка в каком-либо элементе массива, это не так очевидно.

Обходной путь - добавить ввведите в поле атрибут с полным путем 

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

, а затем перейдите к 

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

Но легко забыть добавить дополнительный атрибут.

Есть ли ещепростой способ решить эту проблему?

1 Ответ

0 голосов
/ 23 декабря 2018

Не обязательно однозначное отображение от узла данных к представлениям или узлам DOM.У вас может быть один к одному или один ко многим (например, если в вашем шаблоне было два тега {^ {для персонала}}).

Но если вы можете использовать знания о структуре шаблона,затем вы можете перемещаться по иерархии представления и использовать API-интерфейсы, такие как $.view() view.contents() view.childTags(), чтобы получить данные обратно к выбранному элементу, с которым вы хотите действовать программно.

Например, в вашем примере,следующий код получает объект jQuery для ввода позиции Billy Hill: 

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

Если у вас было два блока {^ {for staff}}, и вы хотите перейти к элементам во втором блоке,Вы можете использовать API-интерфейсы childTags (), чтобы перейти ко второму: 

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

, который снова возвращает вас к «вводу позиции» «Billy Hill».

См. Просмотр иерархии, $. View () и различные представления объекта и тег объекта API.

...