[英]Proper way of dealing with templates and views in Knockout.js
我对此有以下看法:
<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
,每个li
包含不同的数据(因此,不可能共享一个视图)。 数据来自供应商,因此他们可以在合适时更改名称和顺序。
您会看到一个模板存储了它可能具有的不同状态。 我的问题是,您认为这是一种安全的方法吗? 毕竟,真实数据是由Ajax请求提供的(此处由硬编码的JSON userDetails表示)。
另外,设置决定流量的变量的最灵活方法是什么? (例如,loggedIn:“是”,如果将其删除,则会显示另一个视图)。 在这里,我是在viewModel中对它们进行编码的,但是实际上它们可以在外部进行编码。这是正确的方法,还是我误用了敲除功能? 我从未在前端处理过MVVM框架,因此可能有些困惑。
看来您想使用ko.observableArray()
来保存您的用户详细信息。 如果我正确理解,则需要多个li
元素-从ajax调用返回的每个UserDetails
元素。 您的视图模型如下所示:
viewModel = {
loggedIn: ko.observable(true),
users: ko.observableArray([])
}
然后,通过调用viewModel.users.push(newUser)
将每个对象添加到数组中
枚举用户的模板:
<ul data-bind="template:{name:'userTmpl', foreach:users}"></ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.