0

attr src で関数を呼び出そうとしていますが、失敗しています。これが私が試したことです。

function FavoriteViewModel() {
    var self = this

    self.FavoriteProfiles   =   ko.observableArray([])

    self.getRating  =   function(Rating){
        //here i want conditions and concat image path
        return does nothing here
    }

    self.LoadData   =   function(){
        //run ajax and put its result in self.FavoriteProfiles
        self.FavoriteProfiles(Result)
    }   

    self.LoadData()
}

ajax を実行すると、この結果が得られます。結果は複数あり、理解するために単一のオブジェクトのみを投稿しています

ProfileId   20
Age         21
Gender      "F"
Rating      4

そして、このようなデータをバインドしています

<div id="favorite-related-profiles" data-bind="foreach:FavoriteProfiles">
<article class="prfl_box">
    <p>
        <span id="favorite-related-age" data-bind="text:Age"></span>               
        <span id="favorite-related-gender" data-bind="text:Gender"></span>               
        <br>
        <img id="favorite-related-rating" class="pro_rating" src="" data-bind="attr:{src:Rating}">
    </p>
</article>
</div>

このバインディングをこのように試すと

<img id="favorite-related-rating" class="pro_rating" src="" data-bind="attr:{src:$root.getRating.bind($data,Rating)}">

これをsrcで取得します

src="function () { [native code] }"

src 属性を動的に生成するにはどうすればよいですか。
画像を表示する必要があることに注意してください。画像の名前は 4rating.png 、 5rating.png 、 default.png です。src 属性で評価が 4 assing 4rating であるかどうかを確認したい。これどうやってするの。

4

2 に答える 2

2

さて、彼らはそれを行ういくつかの方法です. あなたの質問を理解したら、src 属性を として持つ必要があります4rating.png。5rating.png評価値に応じて、それぞれ 4,5 としてください。

これがシナリオである場合、このデモを調べてください - 汚い方法

それでは、コードに従って機能するようにしましょう:-

DEMO2-適切な方法を調べることができます。要素を調べて yopu'll を確認すると、次のような HTML マークアップが見つかります。

<td data-bind="attr:{src: $root.getRating($data)}" src="4rating.png">
            </td>

それが役に立てば幸い。

編集:-

ノックアウトモデルを使用している場合は、モデルを分離しておくことができます。フローをシンプルに保つと、より拡張可能になります。Revealing Module Pattern DEMOを使用して、ノックアウトでコードを学習する方法を共有します。

View Model を次のように簡単に作成します。

function FavoriteViewModel(data) {
    var self = this

    self.ProfileId = data.ProfileId;//Do some exception handling
    self.Age = data.Age;//Do some exception handling
    self.Gender = data.Gender;//Do some exception handling
    self.Rating = data.Rating;//Do some exception handling
    self.RatingExtended = data.Rating + "rating.png"; //Some random stuff

}

data-bindお気に入りの配列を保持し、 HTMLになる変数を作成します。

var FavoriteProfiles = ko.observableArray([]);

最後に、AJAX を呼び出してデータを取得し、それを に割り当てますFavoriteProfiles。

var ajaxdata = DummyAjaxCall(); //get all profiles

        $.each(ajaxdata, function (index, value) {
            FavoriteProfiles.push(new FavoriteViewModel(value)); //Create a Model
        });
于 2013-10-11T10:27:47.523 に答える
0

データバインドを次のように変更します。

data-bind="attr:{src:$root.getRating.bind($data,Rating)}"

変更されたのは''、関数呼び出しの周りから取得したことだけです。これにより、本質的に src を関数に文字列として設定することになります。

編集：関数のバインドを削除してみてください

data-bind="attr:{src:$root.getRating($data,Rating)}"
于 2013-10-11T08:06:08.900 に答える