1

我有一个 viewModel 包含一个数据对象，其中包含 3 个值（姓名、年龄、照片）。要访问数据属性，我可以使用 data.name、data.age 和 data.photo。

我无法在 img 标签中显示照片，但我可以将其内容放入输入字段中。有任何想法吗？

在我看来我有

<div
    data-role="view" 
    data-layout="layout-customers"
    id="customer" 
    data-title="Customer"
    data-transition="slide:left"
    data-model="app.customer.viewModel"
    data-init="app.customer.init"
    data-show="app.customer.show">

    <form>
        <img data-bind="value: data.photo" src="data:image/png;base64"/>
        <input type="text" data-bind="value: data.photo"/>
        <input type="text" data-bind="value: data.name"/>
        <input type="text" data-bind="value: data.age"/>
    </form>

</div>
4

2 回答 2

1

找到了实现这一目标的一种方法......

我将以下代码行添加到视图数据显示调用的函数中...

//Get result here into result array
viewModel.set("data", result[0]);
var smallImage = $("#smallImage");
smallImage.attr("src", "data:image/jpeg;base64," + viewModel.data.photo);

看法

<img id="smallImage" src="" style="height:135px;"/>

有没有人有更好的方法？

于 2013-10-22T09:34:59.280 回答
0

您可以将计算字段添加到您的 VM，以创建图像期望的字符串。

假设您的虚拟机如下所示：

var VM = kendo.observable({
    name: undefined,
    age: undefined,
    photo: undefined
});

所以你可以这样做：

var VM = kendo.observable({
    name: undefined,
    age: undefined,
    photo: undefined,
    photoAsBase64: function()
    {
        return "data:image/jpeg;base64," + this.get('photo');
    }
});

然后，您将图像源绑定photoAsBase64到attr

<img data-bind="attr: { src: data.photoAsBase64 }" />
于 2015-08-26T08:59:53.783 回答