2

Web ページに初めて knockoutjs を実装しようとしています。次の問題に出くわしましたが、これも「ベスト プラクティス」のケースである可能性があります。

商品ページがあり、商品に商品画像を含めることができます。利用可能な製品画像がない場合、プロパティは null に設定され、「利用可能な画像がありません」という画像を表示する必要があります。

私のモデル:

function ProductOverview() {
     var self = this;

     self.guid = ko.observable();
     self.Image = ko.observable();
     self.IsActive = ko.observable(false);
}

私のビューモデル:

function productOverviewModelView() {
var self = this;

self.productOverview = new ProductOverview();
self.ShowNoImage = ko.computed(function () {
    if (self.productOverview.Image() === null || self.productOverview.Image() === "") {
        return true;
    } else {
        return false;
    }
}, this);
self.ImageAvailable = ko.computed(function () {
    if (self.productOverview.Image() === null || self.productOverview.Image === "") {
        return false;
    } else {
        return true;
    }
}, this);

//whenever the device is changed call this function
self.selectedProduct.subscribe(function () {
    if (self.selectedProduct === "") {
        self.productOverview = null;
    } else {
        $.ajax({
            type: "POST",
            url: "productoverview.aspx/getdevice",
            data: "{'guid':'" + self.selectedProduct() + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var product = JSON.parse(unescape(data.d));
                self.productOverview.guid(product.guid);
                self.productOverview.Image(product.Image);
                self.productOverview.IsActive(product.IsActive);
            }
        });
    }
});

}

私の見解：

<div style="display:inline-block;">
  <img alt="" src="#" data-bind="attr: { src: productOverview.Image }" />
  <img alt="" src="../../images/no-image-available.jpg" data-bind="visible:ShowNoImage" />
</div>

それは動作しますが、このように動作していません:

<img alt="" src="../../images/no-image-available.jpg" data-bind="visible: productOverview.Image != ''" />

計算されたオブザーバブルを作成する代わりに、より短い方法はありますか?

また、製品がアクティブなときにアクティブな画像を表示したかったのです。

<img src="../../images/active_icon.gif" data-bind="visible: productOverview.isActive" />

しかし、この画像が表示されないのはなぜですか?

逆に、非アクティブな画像をこのように表示することはできますか?

<img src="../../images/notactive_icon.gif" data-bind="visible: !productOverview.isActive" />
4

2 に答える 2

5

あなたの質問に関するjsFiddleの例を作成しました：http://jsfiddle.net/XAXKZ/5

あなたはいくつかの間違いを犯しました:

  • isActive と IsActive が混同されています。JavaScript では引き続き大文字と小文字が区別されます。そして、それを関数として表示する必要があります:

data-bind="visible: !IsActive()"

  • 専用の関数を追加する必要なく、この方法で他の変数をテストすることもできます。

data-bind="visible:productOverview.Image() == '' || productOverview.Image() == null"

于 2013-04-05T08:03:32.237 に答える
0

次のようにオブザーバブルを呼び出す必要があります。

<img src="../../images/notactive_icon.gif" data-bind="visible: productOverview.isActive() " />

isActive は関数であるため、null になることはありません。

于 2013-04-04T14:56:03.567 に答える