在淘汰赛控制流模板中使用基于字符串的变量

【问题标题】：Using string based variables in knockouts controlflow templates在淘汰赛控制流模板中使用基于字符串的变量
【发布时间】：2014-09-23 12:49:40
【问题描述】：

我正在使用 Knockout 的无容器控制流模板：

<div data-bind="foreach: myData" style="margin-top: 10px;">
        <div>
            <a href="#" data-bind="attr: {href: url}" target="_blank">
                <img src="http://www.google.com/s2/favicons?domain={{url}}" />
            </a>
        </div>
</div>

将 url 获取到 href 是有效的，但我想在图像 src 中再次调用 url 值。我想保留图像源的开头部分，只需将 url 添加到末尾。使用 Knockout 模板如何做到这一点？

【问题讨论】：

标签： javascript knockout.js knockout-2.0

【解决方案1】：

对于这个简单的任务，您不需要任何额外的模板，因为 KO 允许您在绑定中编写任意表达式，例如字符串连接。

所以你可以直接在 attr 绑定中构建你的 url：

<div data-bind="foreach: myData" style="margin-top: 10px;">
    <div>
        <a href="#" data-bind="attr: {href: url}" target="_blank">
            <img data-bind="attr: { 
                 src: 'http://www.google.com/s2/favicons?domain=' + url()}" />
        </a>
   </div>
</div>

注意：如果您的url 属性是ko.observable，则需要编写url() 才能在绑定表达式中获取其值。

然而，更合适的解决方案是在视图模型中计算图像 url，并且您将拥有一个 imageUrl 属性，您可以将其与 <img data-bind="attr: { src: imageUrl }"/> 绑定

【讨论】：