1

（名前、年齢、写真）に3つの値を持つデータオブジェクトを含むviewModelがあります。データ プロパティにアクセスするには、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

これを達成するための1つの方法を見つけました...

ビュー data-show によって呼び出される関数に次のコード行を追加しました ...

//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 に追加して、イメージが期待する文字列を作成できます。

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 に答える