Правильный синтаксис привязки к форме в jsviews (коммит 26)

Я экспериментирую с библиотеками jsrender/jsviews Бориса Мура и на данный момент использую текущую версию (коммит 26). (Я понимаю, что API постоянно меняется, но хотел бы попрактиковаться в его использовании)

Я просмотрел демо здесь: http://borismoore.github.com/jsviews/demos/index.html

Но у меня возникли проблемы с определением синтаксиса data-link. В некоторых демонстрациях используется синтаксис data-link="{:FirstName:}.

Я не понимаю, почему 2 двоеточия. Я предполагаю, что 1-е двоеточие означает, что кодирование HTML не будет выполнено, но понятия не имею о втором.

В других местах я вижу синтаксис типа data-link="address.street" Здесь вообще нет ни фигурных скобок, ни двоеточий. Интересно, когда они вам нужны, а когда нет. Также я не понимаю, как вы укажете, хотите ли вы одностороннюю или двустороннюю привязку. Или если вы хотите, чтобы привязка срабатывала в ответ на нажатие клавиши вместо размытия.

Вот пример, который я хотел бы настроить правильно:

<div id="form">
    <p>
        <label>First Name</label>
        <input type="text" name="FirstName" data-link="FirstName"/>
    </p>
    <p>
        <label>Last Name</label>
        <input type="text" name="LastName" data-link="LastName"/>
    </p>
    <p>
        <label>Full Name</label>
        <input type="text" data-link="FirstName + ' ' + LastName"/>
    </p>
    <p>
        <label>Gender</label>
        <select name="Gender">
            <option value="U">Unknown</option>
            <option value="M">Male</option>
            <option value="F">Female</option>
        </select>
    </p>
</div>
<script>
   var data =
   {
      FirstName: "Bill",
      LastName: "Willis",
      Gender: "M"
   };

   $("#form").link(true, data);  //What is the 1st parameter (true) about?
</script>

Я не знаю, как выполнить привязку к элементу управления select.

Я был бы признателен за любое объяснение того, как это должно быть сделано.


javascript jsrender jsviews
person CHS    schedule 17.02.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

data-link="a.b.c" — это сокращенный синтаксис, который эквивалентен полному синтаксису data-link="{:a.b.c:}" для входных данных (что дает вам двустороннюю привязку) и data-link="{:a.b.c}" для большинства других элементов (т. е. не элементов формы для пользовательского ввода, поэтому, конечно, это односторонняя привязка) .

Подробнее см. https://github.com/BorisMoore/jsviews/issues/136. .

Если вы хотите выполнить привязку не по умолчанию, вы используете полный синтаксис, например. с convert или convertBack, как в data-link="{cvt:a.b.c:cvtBack}", или с односторонней привязкой к входу, как в data-link="{:a.b.c}".

Таким образом, двоеточия указывают направление привязки и позволяют добавить преобразователь для этой привязки.

Односторонний «к источнику» в настоящее время напрямую не поддерживается, но возможен с помощью преобразователей. Привязка к выбору показана в нескольких примерах, таких как в этом или этот.

В настоящее время триггер onblur (или onchange), но скоро его можно будет установить и декларативно. Прямо сейчас для этого требуется код — как в этот пример.

Код всех демонстраций находится здесь.

person BorisMoore    schedule 17.02.2013
comment
Большое спасибо за ваш ответ. - person CHS; 18.02.2013