Question

KO新手。

我有点工作，但它不起作用！

如果用户已登录，我想显示图片标签（可见）（我正在使用带有MVC 4和Razor的KO）：

<img id="imgFavRestaurant" data-bind="attr: { style: { visibility: UserId > 0 ? 'visible' : 'hidden' }, src:FavoriteOutletImageUrl }" />

当用户登录时，它向我显示正确的图像，但是当用户未登录时，我仍然看到图像标记（但是当我为网址返回空字符串时，这是一个空图像）：

 var userId = 0;
            @if (Site.Web.Helpers.UserContext.IsAuthenticated)
            {
                @:userId = @Site.Web.Helpers.UserContext.User.Id;
            }

            self.UserId = userId;

            self.FavoriteOutletImageUrl = ko.computed(function () 
            { 
                if (userId <= 0)
                {
                    return '';
                }
               return (data.IsUserFavoriteOutlet) ? '@Url.Content("~/Images/FavOutlet.png")' : '@Url.Content("~/Images/NonFavOutlet.png")';
            });

我哪里错了？为什么它总是显示图像标签？另外，如何在KO和HTML5中绑定多个属性？

谢谢

Answer 1

首先，UserId是一个普通值，并且不会更新视图，除非某些东西迫使KO重新评估此图像元素所在的绑定上下文.UserId应该是一个可观察的：

self.UserId = ko.observable(userId);

因为不执行此操作而产生的另一个问题是您的FavoriteOutletImageUrl计算将不会更新，因为userId不是可观察的，因此计算机将不关心其值是否更改。与'data.IsUserFavoriteOutlet'相同。您将不断评估此变量，也许用户最喜欢的插座会发生变化。这应该是：

self.IsFavoriteOutlet = ko.observable(data.IsUserFavoriteOutlet);

所以你的计算结果是：

self.FavoriteOutletImageUrl = ko.computed(function () { 
    if (self.UserId() <= 0) {
        return '';
    }

    return self.IsUserFavoriteOutlet()
        ? '@Url.Content("~/Images/FavOutlet.png")'
        : '@Url.Content("~/Images/NonFavOutlet.png")';
 });

现在，如果UserId发生变化或IsUserFavoriteOutlet发生变化，此计算结果将重新评估。

在绑定中，使用KO visible绑定代替显示/隐藏元素。

<img id="imgFavRestaurant" data-bind="visible: UserId > 0 ? 'visible' : 'hidden',
    attr: { src: FavoriteOutletImageUrl }" />

您应该考虑的另一件事是使用绑定的计算属性，而不是在绑定中编写逻辑。

self.showRestaurantImage = ko.computed(function(){
    return self.userId() > 0;
});

和

<img id="imgFavRestaurant" data-bind="visible: showRestaurantImage,
    attr: { src: FavoriteOutletImageUrl }" />

Answer 2

我必须这样做：

data-bind="style: { visibility: UserId > 0 ? 'visible' : 'hidden' }, attr: { src: FavoriteOutletImageUrl }

img属性，多个绑定和评估不起作用

2 个答案: