У меня есть эта скрипка со следующим видом:
<ul id="modules">
<li id="modulePersonal" data-bind="template: 'personalDataTemplate'"></li>
<li id="moduleAccounts" data-bind="template: 'accountsDataTemplate'"></li>
</ul>
<script type="text/x-jquery-tmpl" id="personalDataTemplate">
<h3 class="klavikaBold">Your Details</h3>
<div class="content">
{{if loggedIn}}
<p>This is what you've been telling us:</p>
<dl class="pairDefinition">
<dt>Name</dt>
<dd>${name}</dd>
<dt>Gender</dt>
<dd>${gender}</dd>
<dt>Age</dt>
<dd>${age}</dd>
<dt>Country</dt>
<dd>${country}</dd>
</dl>
</div>
{{else}}
<p>Hey, you Alpha male! Come here
and give us all of your personal
data! We promise we won't give it
for free to anybody!</p>
{{/if}}
</div>
</script>
<script type="text/x-jquery-tmpl" id="accountsDataTemplate">
<h3>Your accounts</h3>
<div class="content">
<p> There are 2 messages from Yahoo, 1 from Lumosity and 5 from Tweetland</p>
<ul class="listSeparated line">
<li>
<dl class="pairDefinition">
<dt>Yahoo</dt>
<dd><a href="#">Account Details</a></dd>
<dt>Email</dt>
<dd>blabisbla@yahoo.com</dd>
</dl>
</li>
<li>
<dl class="pairDefinition">
<dt>Lumosity</dt>
<dd><a href="#">Account Details</a></dd>
<dt>Username</dt>
<dd>ilovetheiradds</dd>
</dl>
</li>
<li>
<dl class="pairDefinition">
<dt>Tweet Land</dt>
<dd><a href="#">Account Details</a></dd>
<dt>Username</dt>
<dd>costaricangamer</dd>
<dt>Games</dt>
<dd>Lovecity, CarRace, Unit</dd>
</dl>
</li>
</ul>
</div>
</script>
И этот код:
(function($) {
var userDetails = {
"name": "Óscar Acuña",
"country": "Costa Rica",
"province": "San José",
"district": "San Andrés",
"zip": "123456",
"birthday": "12/12/1990",
"gender": "Male",
"hotnessIndex": "6.8",
"smell": "Nice if not sweaty"
};
// Overall viewmodel for this screen, along with initial state
var viewModel = {
loggedIn : "yeah",
name: userDetails.name,
country: userDetails.country,
province: userDetails.province,
gender: userDetails.gender,
age: getAgeSortOf(userDetails.birthday) + " years old"
};
ko.applyBindings(viewModel);
function getAgeSortOf(birthday) {
return new Date().getFullYear() - new Date(birthday).getFullYear();
}
})(jQuery);
Обратите внимание, что я разработал шаблон только для первого li.
Давайте представим, что может быть до 10 li
с, каждый из которых содержит разные данные (поэтому идея их совместного использования в одном представлении маловероятна). Данные поступают от поставщика, поэтому они могут изменить имена и порядок, когда сочтут нужным.
Вы видите, что один шаблон хранит различные состояния, которые он может иметь. Мой вопрос, как вы думаете, это безопасный подход? В конце концов, реальные данные передаются по запросу Ajax (здесь представлены жестко закодированными JSON userDetails).
Кроме того, какой самый гибкий способ задания переменных, определяющих поток? (например, loggedIn: «да», если вы удалите его, отобразится другой вид). Здесь я кодирую их прямо в viewModel, но на самом деле их можно кодировать снаружи ... Это правильный подход или я не использую нокаут? Я никогда не имел дело с фреймворком MVVM во внешнем интерфейсе, поэтому я могу быть немного смущен.