我如何做一个淘汰赛绑定到backgroundImage网址？

我有我如何做一个淘汰赛绑定到backgroundImage网址？

var items= [ 
    {"image": "/images/image1.jpg" }, 
    {"image": "/images/image2.jpg" }, 
    {"image": "/images/image3.jpg" } 
];

可观察到的阵列我的模板看起来是这样的：

<div data-bind="foreach: items"> 
    <div class="box" data-bind="style: {'background-image': url(image)}"></div> 
</div>

不幸的是，这是行不通的。我想要的是：

<div> 
    <div class="box" style="background-image: url(/images/image1.jpg)"></div> 
    <div class="box" style="background-image: url(/images/image2.jpg)"></div> 
    <div class="box" style="background-image: url(/images/image3.jpg)"></div> 
</div>

我该如何达到这个目标？

来源

2012-06-26 user1482949

你需要连接你的字符串：

data-bind="style: { backgroundImage: 'url(\'' + image() + '\')' }"

如果image实际上是可观察到的，你需要调用它，否则你会最终拼接功能来代替。

注意，因为你的绑定表达式，涉及财产，必须调用函数（()）。否则，你将最终得到一个连接函数本身的Javascript表达式。
简单绑定不需要()的唯一原因是Knockout会检测绑定何时返回属性函数并为您调用它。

来源

2012-06-26 14:12:50 SLaks

我不知道这是任何更好或更坏......

我组装的网址（）我的模型视图里：

var items= [ 
    {"image": "url(/images/image1.jpg)" }, 
    {"image": "url(/images/image2.jpg)" }, 
    {"image": "url(/images/image3.jpg)" } 
];

然后，我可以像往常一样的数据绑定：

data-bind="style: { 'background-image': image }"

来源

2012-09-26 18:54:37 fitzgeraldsteele

这是我的例子。始终使用它

<div data-bind="foreach: items"> 
    <div class="box" data-bind="style: {'backgroundImage': 'url('+ image +')'}"></div> 
</div>

来源

2015-09-13 16:45:08

我如何做一个淘汰赛绑定到backgroundImage网址？

回答

相关问题