如何使用樣式數據綁定？

我在使用KnockoutJS時遇到了困難。如何使用樣式數據綁定？

<script id="avatarTemplate" type="text/x-jquery-tmpl"> 
    <div id="avatar_${id}" class="avatar" data-bind="style: 
    { background: s, width: '50px', height: '85px', left: (x + 'px'), top: 
    (y + 'px') }">${s}, ${x}, ${y}</div> 
</script> 

<div data-bind="template: { name: 'avatarTemplate', foreach: avatars }"></div>

渲染這個模板的結果是：

<div id="avatar_1" class="avatar" style="width: 50px; height: 85px;">avatar.png, 0, 0</div>

誰能幫我弄清楚爲什麼是依賴於視圖模型的所有樣式顯示不出來？

來源

2011-06-15 fadedbee

如果x和y是可觀，那麼你需要這樣指定它：如果您在表達式中使用可觀察到的

<div id="avatar_${id}" class="avatar" data-bind="style: 
    { background: s, width: '50px', height: '85px', left: (x() + 'px'), top: 
    (y() + 'px') }">${s}, ${x}, ${y}</div>

，則需要用（指定），爲它贏得」 t自動解包。

http://jsfiddle.net/rniemeyer/6GtV3/

來源

2011-06-15 20:05:02

啊，我不知道該怎麼辦KnockoutJS串聯..謝謝：O） – Andrew 2011-12-06 12:46:15

我的上帝！只花了30分鐘試圖找出這個！ = D – 2012-10-12 05:16:05

謝謝。節省我的時間 – 2013-10-08 15:44:57

這不是一個直接的答案，但我用Google搜索到這個網頁上，同時展開調查。我有這樣的事情：

<div data-bind="style: { backgroundImage: src }">

其中src是像「http://image.com/foo.jpg」在我的模型對象的值。指定SRC的功能在上面的回答沒有幫助：

<div data-bind="style: { backgroundImage: src() }">

我發現，如果src值不是一個有效的background-image屬性，它被完全忽略。

我不得不使用：

<div data-bind="style: { backgroundImage: 'url(\'' + src() + '\'' }">

可能會在某些時候節約一些痛苦:)

來源

2016-09-28 08:49:24 Neek

如何使用樣式數據綁定？

回答

相關問題