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绑定中构建你的网址：

<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，则需要编写ko.observable以在绑定表达式中获取其值。

然而，更合适的解决方案是在视图模型中计算图像网址，并且您将拥有imageUrl属性，您将使用<img data-bind="attr: { src: imageUrl }"/>

绑定该属性

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

1 个答案: