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

Question

我正在使用 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 模板如何做到这一点？

Answer 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()注意：如果您的url属性是 a ，则需要编写ko.observable以在绑定表达式中获取其值。

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