在 Knockout.js 中处理模板和视图的正确方法
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
秒,每个秒都包含不同的数据(因此它们共享单个视图的想法不太可能(。数据来自供应商,因此他们可以在认为合适时更改名称和顺序。
您会看到一个模板存储它可能具有的不同状态。我的问题是,你认为这是一种安全的方法吗?毕竟,真实数据是由 Ajax 请求提供的(这里由硬编码的 JSON userDetails表示(。
此外,设置确定流量的变量的最灵活方法是什么?(例如登录:"是",如果删除它,将显示另一个视图(。在这里,我直接在视图模型中对它们进行编码,但它们实际上可以在外部编码......这是正确的方法还是我错过了淘汰赛?我从来没有在前端处理过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>
相关文章:
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- 主干:视图's的呈现方法被调用,但DOM未更新
- 在主干视图中调用render()方法的好方法
- 有没有一种方法可以将媒体打印css启用为普通视图
- 在主干视图中的每个方法之后是否需要“返回此内容”
- 如何将经度/经度值绑定到挖空视图模型方法
- Backbone js代码气味-嵌入子视图的更好方法
- Backbone js视图渲染点击方法未调用[Very Basic]
- 将返回值作为主干视图方法之间的参数传递
- 主干 - 从我的原型视图调用方法.js
- 从 Angular.js 视图中修改方法中的数据的最佳做法
- 从 JavaFX Web 视图调用 Java 方法
- Extjs 5.1:视图控制器中的方法未调用
- 带有翡翠视图引擎的Hapijs显示错误的最佳方法
- 从 JavaScript 调用 ruby 方法或从 RoR 中的视图中传递参数
- JSF:在视图被 AJAX 调用更新后立即调用 javaScript 方法
- 如何使用 Ajax 调用在 MVC 中的返回视图方法中返回 JSON 数据
- 从谷歌浏览器控制台内部调用主干视图方法
- Django/Python:在不同时间使用用户上传的文件用于两个不同的视图方法
- 如何从控制器触发视图方法