0

KO新手。

我有点工作，只是它不太工作！

如果用户已登录，我想显示图像标签（可见）（我在 MVC 4 和 Razor 中使用 KO）：

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

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

 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 中绑定多个属性？

谢谢你

4

2 回答 2

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 更改，则此计算将重新评估自身。

在您的绑定中，使用 KOvisible绑定来显示/隐藏元素。

<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 }" />
于 2013-09-14T19:56:38.330 回答
0

我不得不这样做：

data-bind="style: { visibility: UserId > 0 ? 'visible' : 'hidden' }, attr: { src: FavoriteOutletImageUrl }
于 2013-09-14T16:06:01.917 回答