0

初めてノックアウトを使用しています。ユーザーが画像の URL を含むアイテムのリストを作成できる Web ページを作成しようとしています。img src 属性をデータバインドできましたが、後で jquery 関数を使用して更新すると、ノックアウト モデルを保存するときに新しい src 値が取得されません。

これが私のページの簡略化されたバージョンのフィドルです - http://jsfiddle.net/TurUh/4/

保存ボタンをクリックすると、モデルが元の画像 src (test.png) を取得することがわかります。次に、[イメージの変更] ボタンを使用すると、イメージ src が (changed.png) に更新され、firebug でテストして、html が変更されたことを確認できます。保存ボタンをもう一度クリックすると、モデルは古い src 値 (test.png) を使用します。

私は何か間違ったことをしていますか?誰でもこの問題を解決する方法を提案できますか?

4

2 に答える 2

1

あなたは正しい道を進んでいますが、ボタンのクリックで ViewModel を更新するのではなく、コードの後半で Knockout オブジェクトを使用することから離れました。

適切に機能するために、ここでコードを更新しました。ご意見をお聞かせください。

http://jsfiddle.net/TurUh/6/

この問題に取り組む他の人にとっては、changeImage 関数を ViewModel に入れる必要があり、ViewModel オブジェクトを次のように更新する必要があります。

// Update the whole project array
self.changeImages = function() {
   for(var i=0; i < self.projects().length; i++)
   {
         self.projects()[i].ImageURL('changed.png');
   }
};

プロジェクト配列内で、ImageURL も監視可能なオブジェクトにする必要があることに注意してください。

于 2012-09-25T12:52:26.933 に答える
0

エラーを管理するための最良の方法:

 ko.bindingHandlers.img = {

    // Mise à jour de l'image
    update: function (element, valueAccessor) {
        // Données de l'observable
        var value = ko.utils.unwrapObservable(valueAccessor()),
            src = ko.utils.unwrapObservable(value.src),
            fallback = ko.utils.unwrapObservable(value.fallback),
            $element = $(element);

        // On set l'url de l'image, si fichier innaccesible alors on set le src à fallback (url par défaut)
        if (src) {
            $element.attr("src", src);
        } else {
            $element.attr("src", fallback);
        }
    },

    // Init de l'image
    init: function (element, valueAccessor) {
        var $element = $(element);

        $element.error(function () {
            var value = ko.utils.unwrapObservable(valueAccessor()),
                fallback = ko.utils.unwrapObservable(value.fallback);

            $element.attr("src", fallback);
        });
    }
};

<img class="img-rounded img-responsive center-block" data-bind="img: { src: pictureUrl, fallback: _pictureDefault }" />
于 2015-05-07T15:26:45.667 に答える