Вы когда -нибудь думали об использовании записей в JavaScript? Оказывается, что эксплуатационные данные на клиенте могут быть такими простыми. Определите источник данных, связывайте данные с различными тегами и достигайте эффектов, подобных приложениям. Это так круто! (Во -первых, содержание статьи происходит от MSDN, но это всего лишь краткое изложение, по моим собственным словам.)
Давайте посмотрим на два примера:
http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm
http://msdn.microsoft.com/workshop/samples/author/databind/dbupdate.htm
Я должен снова восхищаться Microsoft.
Это архитектура данных данных:
Конечно, есть следующие шаги для реализации привязки данных:
Первым шагом является определение источника данных
С момента IE4.0 были поддержаны следующие четыре источника данных:
Управление табличными данными (TDC)
TDC предоставляет простой способ получить доступ к текстовым данным с помощью формата, как правило, файл CSV.
Вот простой пример:
<Object Classid = CLSID: 333C7BC4-460F-11D0-BC04-0080C7055A83
id = dsocomposer width = 0 height = 0>
<param name = datairl value = composer.csv>
</object>
Удаленная служба передачи данных (RDS)
Удаленная служба данных, непосредственно доступ к данным на стороне удаленного сервера, Internet Explorer 4.0. RDS реализуется с помощью подключения OLE-DB или Open Database (ODBC).
Пример:
<Object Classid = CLSID: BD96C556-65A3-11D0-983A-00C04FC29E33
ID = DSOCOMPOSER HEIGHT = 0 ширина = 0>
<param name = server value = http: // musicserver>
<param name = connect value = dsn = music; uid = uid; pwd =>
<param name = sql value = select compsr_name из Composer>
</object>
Но это кажется немного проблемой безопасности, потому что клиент может увидеть этот код.
XML -источник данных
Я не скажу много о XML, я использую это так в IE4.0:
<applet
code = com.ms.xml.dso.xmldso.class
id = xmldso
ширина = 0
высота = 0
mayscript = true>
<param name = url value = composer.xml>
</applet>
Internet Explorer 5 или выше может быть похожим на следующее:
<!-[если gte ie 5]>>
<xml id = xml1>
<Тема-Инфо>
<stage-type> Ссылка </page-type>
<Член-тип> недвижимость </type>
<Постоянный имени> accessKey </persistent-name>
<runtime-name readable = 1 riseable = 1> accesskey </runtime-name>
<abstract> Устанавливает или извлекает ключ ускорителя для объекта. </rablect>
</tope-info>
</xml>
<! [endif]->
Кроме того, IE также предоставляет концепцию острова XML Data Island: острова XML Data.
MSHTML Источник данных
Пример страницы данных HTML:
<h1 id = compsr_first> hector </h1>
<marquee id = compsr_last> berlioz </marquee>
<div id = compsr_birth> 1803 </div>
<h2 id = compsr_first> modest </h2>
<h3 id = compsr_last> moussorgsky </h3>
<button id = compsr_birth> 1839 </button>
<textarea id = compsr_first> franz </textarea>
<xmp id = compsr_last> liszt </xmp>
<span id = compsr_birth> 1811 </span>
После определения вы можете получить доступ к нему так:
<объект идентификатор = htmlcomposer data = compdata.htm height = 0 width = 0>
</object>
.Step 2: связывайте данные с элементом HTML
Как правило, он связан с помощью данных и DataFld в тегах. Например:
<input type = textbox dataSrc =#dsococoping datafld = compsr_last>
и
<Таблица dataSrc =#dsocomposer>
<tr>
<td> <div datafld = compsr_first> </div> </td>
</tr>
</table>
Это пример связующих таблиц:
http://msdn.microsoft.com/workshop/samples/author/databind/dbtable.htm
Среди них источник данных:
<объект идентификатор = tdccomposers classid = clsid: 333c7bc4-460f-11d0-bc04-0080c7055a83>
<param name = datairl value = http: //msdn.microsoft.com/workshop/samples/author/databind/composer.csv>
<param name = useHeader value = true>
<param name = textqualifier value = '>
</object>
Бедный стол
<Таблица dataSrc =#tdccomposers>
<theade> <tr style = font-weight: bold>
<Td> первый </td> <td> последний </td> <td> Рождение </td> <td> Смерть </td> <td> Origin </td>
</tr> </head>
<tbody>
<tr>
<td> <div datafld = compsr_first> </div> </td>
<td> <div datafld = compsr_last> </div> </td>
<td> <div datafld = compsr_birth> </div> </td>
<td> <div DataFld = compsr_death> </div> </td>
<td> <div DataFld = Origin> </div> </td>
</tr>
</tbody>
</table>
Это эффект:
Первый последний день рождения смерть
Гектор Берлиоз 1803 1869 Франция
Скромный Мусзоргский 1839 1881 г. Россия
Franz Liszt 1811 1886 Франция
Антонио Вивальди 1678 1741 Италия
Иоганн Себастьян Бах 1685 1750 Германия
Людвиг Ван Бетховен 1770 1827 Германия
Вольфганг Амадес Моцарт 1756 1791 Австрия
Джозеф Гайдн 1732 1809 Германия
Клод Дебюсси 1862 1918 Франция
Шаг 3: Динамическое добавление, делеция и т. Д. Данных (объектная модель)
Конечно, связывание может быть динамичным:
В скрипте:
span1.datasrc = #dsocomposer;
span1.datafld = compsr_first;
HTML выглядит так:
<span dataSrc =#dsocomposer DataFld = compsr_first> </span>
И вы можете получить доступ к источнику данных Ado:
var orcordset = dsocomposer.recordset;
Естественно, есть orcordset .movenext и так далее.
нравиться:
<input id = cmdnavfirst type = кнопка значение = <<
onclick = tdccomposes.recordset.movefirst ()>
<input id = cmdnavprev type = значение кнопки = <<
onclick = tdccomposes.recordset.moveprevious ();
if (tdccomposers.recordset.bof)
tdccomposers.recordset.movefirst ();>
<input id = cmdnavnext type = кнопка значение =>
onclick = tdccomposes.recordset.movenext ();
if (tdccomposers.recordset.eof)
tdccomposers.recordset.movelast ();>
<input id = cmdnavlast type = кнопка значение = >>
onclick = tdccomposes.recordset.movelast ()>
Это также можно использовать так:
<script language = vbscript>
для каждого objfld в rsattendees.fields
Document.write (имя поля IS & objfld.name & <br>)
Document.Write (значение поля IS & objfld.value & <br>)
следующий
</script>
Добавление и записи удаления: orcordset.addnew () и orcordset.delete ().
Шаг 3: Ответьте на различные события данных (модель события)
Как сделать соответствующую обработку после изменения данных?
Метод, предоставленный в MSDN, заключается в следующем:
<script for = cboSort (имя источника данных) event = onchange (имя события)>
...
</script>
Это список имен событий:
Пузырьки событий отменяют приложения для представления в версии Internet Explorer
OnbeForeUpdate True True Bound Elements 4.0
OnaFterUpdate True False Bound Elements 4.0
OnRowEnter True False DSO 4.0
OnRowExit True DSO 4.0
OnbeForeUnload Ложое ложное окно 4.0
ondataavailable true false dso 4.0
ondatasetcomplete true false dso 4.0
ondatasetchanged true false dso 4.0
OnerRorUpdate True True Bound Elements 4.0
OnreadyStateChange True False DSO 4.0
OncellChange True False DSO 5.0
OnRowsInserted True False DSO 5.0
OnRowsDelete True False DSO 5.0
Как насчет этого?
Я думаю, что http://msdn.microsoft.com/workshop/samples/author/databind/dbevts.htm является относительно полным примером применения. Если вы внимательно изучите его, вы что -нибудь получите.
Существует много примеров использования привязки данных для реализации пейджинга в Интернете. На самом деле, связывание данных может делать больше вещей, верно? В богатом клиенте должны быть очень большие приложения, такие как создание очень сложных данных.
Теперь я хочу еще больше понять, как легко достичь синхронизации со стороной сервера, потому что привязка данных клиента не оказывает влияния на сторону сервера (вы можете генерировать источники данных со стороны сервера, но операция клиента не вернется на сервер). MSDN сказал, что RDS в порядке, но этот метод слишком неуклюжий и небезопасен.