mvc中的敲除图像绑定

时间:2014-11-13 06:01:06

标签: html css model-view-controller knockout.js

我开发了mvc应用程序。现在我必须使用knockout.js进行图像绑定,我试图绑定从头版数据库获取图像。但是图像没有显示出来。下面我给我的图像绑定代码。请检查我的代码并更正。谁能请帮忙???

我的代码

<div data-bind="with: backgroundimage">

<section data-bind="style:{background:'url(attr:{src: VirtualPath})'} img width='2080' height='1362' alt=''" >

</section>

2 个答案:

答案 0 :(得分:4)

您可以通过执行以下操作来设置敲除部分的背景图像。

<!-- This is a *view* - HTML markup that defines the appearance of your UI -->

<div data-bind="with: backgroundimage">

<section data-bind="style: { background: 'url(' + path  + ')'}" >

</section>
</div>

Javascript

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.backgroundimage = {
        path : 'http://cdn.sstatic.net/img/share-sprite-new.png?v=204b1e0e421b'
    };
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

请在这里找到工作小提琴。 http://jsfiddle.net/sherin81/jko1nj8p/

如果要动态设置图像的路径,请将路径传递给viewmodel。

答案 1 :(得分:0)

请尝试这个,如果您使用对象列表,您应该使用Only First对象使用knockout打印如果条件。

<div data-bind="foreach: backgroundimage">
            <!-- ko if: $index() === 0 -->
            <section data-bind="style: { background:' url('+VirtualPath+') repeat-x'  }" style="min-height: 880px; width:100%;">
</section>
            <!-- /ko -->
</div>