我正在尝试使用Knockout在显示模板中显示包含链接和mailto的表格。我还是新来的,我要事先道歉!
这是我的显示模板最初的原因:
<script type="text/template" id="customerSearchDisplayTemplate">
<td class="hiddenId">{0}</td>
<td><a href="/wrenchsciencewebadmin2/UserManager/Customer/CustomerEditor.aspx?CustomerID={1}">{1}</a></td>
<td><a href="mailto:{2}">{2}</a></td>
<td>{3}</td>
<td>{4}</td>
<td>{5}</td>
<td>{6}</td>
<td>{7}</td>
<td><a href="/wrenchsciencewebadmin2/Common/PopupWindows/CustomerNotes.aspx?customerid={8}">{8}</a></td>
</script>
这是我到目前为止,减去mailto AND链接:
<script type="text/template" id="customerSearchDisplayTemplate">
<tr>
<td class = "hiddenId"><span data-bind="text: customerSearchID"/></td>
<td><span data-bind="text: fullName" /></td>
<td><span data-bind="text: primaryEmail" /></td>
<td><span data-bind="text: secondaryEmail" /></td>
<td><span data-bind="text: homePhone" /></td>
<td><span data-bind="text: workPhone" /></td>
<td><span data-bind="text: mobilePhone" /></td>
<td><span data-bind="text: lastLogonDate" /></td>
<td><span data-bind="text: wsNotes" /></td>
</tr>
</script>
答案 0 :(得分:20)
使用attr
属性中的text
和data-bind
属性,如下所示:
<script type="text/template" id="customerSearchDisplayTemplate">
<tr>
<td class = "hiddenId"><span data-bind="text: customerSearchID"/></td>
<td><span data-bind="text: fullName" /></td>
<td>
<span>
<a data-bind="text: primaryEmail,
attr: {href: 'mailto:'+primaryEmail()}" />
<span/>
</td>
<td>
<span>
<a data-bind="text: secondaryEmail,
attr: {href: 'mailto:'+secondaryEmail()}" />
<span/>
</td>
<td><span data-bind="text: homePhone" /></td>
<td><span data-bind="text: workPhone" /></td>
<td><span data-bind="text: mobilePhone" /></td>
<td><span data-bind="text: lastLogonDate" /></td>
<td><span data-bind="text: wsNotes" /></td>
</tr>
</script>
答案 1 :(得分:4)
确保在绑定attr即primaryEmail()时通过函数语法访问电子邮件,否则它将返回函数定义而不是值。
<div data-bind="template: { name : 'customerSearchDisplayTemplate'}"></div>
<script type="text/template" id="customerSearchDisplayTemplate">
<tr>
<td class="hiddenId">
<span data-bind="text: customerSearchID"/>
</td>
<td><span data-bind="text: fullName" /></td>
<td>
<a data-bind="text: primaryEmail,
attr: { href : 'mailto:'+primaryEmail() }" />
</td>
<td>
<a data-bind="text: secondaryEmail,
attr: { href : 'mailto:'+secondaryEmail() }"/>
</td>
<td><span data-bind="text: homePhone" /></td>
<td><span data-bind="text: workPhone" /></td>
<td><span data-bind="text: mobilePhone" /></td>
<td><span data-bind="text: lastLogonDate" /></td>
<td><span data-bind="text: wsNotes" /></td>
</tr>
</script>
答案 2 :(得分:3)
如果你想一直使用MVVM,最好尽量让你的视图变得愚蠢:
<a data-bind="text: primaryEmail, attr: {href: primaryEmailMailtoLink}"></a>
然后在视图模型上创建一个计算的observable:
var ViewModel = function() {
var self = this;
// Observable property:
self.primaryEmail = ko.observable('foo@bar.com');
// Dependent observable:
self.primaryEmailMailtoLink = ko.computed(function() {
return 'mailto: ' + self.primaryEmail();
};
// Etc. (rest of your view model)
}