我如何做一個淘汰賽綁定到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網址？

回答

相關問題