javascript - knockout 切换嵌套项目的可见性

Question

我正在尝试使用 Knockout 切换嵌套项目的可见性。在页面的初始显示时，我不希望嵌套项目可见。如果用户单击链接来显示嵌套项目，那么我希望显示这些嵌套项目(不是所有嵌套项目)。

例如，我有一个产品列表，对于每个产品，我都有一个星级评级列表。默认情况下或对于初始页面加载，不显示评级。如果用户单击“评级”，则会显示该项目的评级。如果用户单击其他项目的“评级”，则会显示该产品的评级以及其他产品的评级。

为了说明这一点，我有两种产品:

三星评级

iPhone评分

如果我点击 iPhone 的评级，则会显示 iPhone 的评级:

Samsung Ratings       
iPhone Ratings
    1203: 3
    1204: 2

如果我点击三星的评级，那么三星的评级也会显示:

Samsung Ratings
    1201: 5
    1202: 4
iPhone Ratings
    1203: 3
    1204: 2

然后，如果我单击任一产品的评级，该产品的评级将变得不可见。

我的示例 HTML 如下:

<ul data-bind="foreach: products">
    <li><span data-bind="text: ProductName"></span>
        <a href="#" data-bind="click: $parent.toggleVisibility">Ratings</a> 
        <ul data-bind="foreach: StarRatings, visible: $parent.shouldShowRatings">
            <li><span data-bind="text: RatingId"></span>: <span data-bind="text: RatingValue"></span></li>
        </ul>
        </li>
</ul>

使用 Knockout.js 3.0.0 的示例 javascript 如下:

var initialProducts = [{ 
    ProductName: "Samsung", 
    StarRatings: [{ 
        RatingId: 1201, 
        RatingValue: 5
        },
        { 
            RatingId: 1202, 
            RatingValue: 4
        }
    ]
}, {
    ProductName: "iPhone", 
    StarRatings: [{ 
        RatingId: 1203, 
        RatingValue: 3
        },
        { 
            RatingId: 1204, 
            RatingValue: 2
        }
    ]
}];

(function (ko) {
    function products(data) {

        var self = this;
        data = data || {};

        // Persisted properties
        self.ProductId = data.ProductId;       
        self.StarRatings = data.StarRatings;
    }    
})(ko);

var viewModel = (function(ko){
    var products = ko.observableArray(initialProducts),
        showRatings = ko.observableArray(),
        toggleVisibility = function(item) {
            if(showRatings.indexOf(item) < 0){
                showRatings.push(item);
            } 
            else{
                showRatings.remove(item);
            }
        },
        shouldShowRatings = function(item) {
            if( showRatings.indexOf(item) >= 0){
                return true;
            }
            {
                return false;
            }
        };

    return {
        products: products,
        showRatings: showRatings,
        toggleVisibility: toggleVisibility,
        shouldShowRatings: shouldShowRatings
    };
})(ko);

ko.applyBindings(viewModel);

我可以显示所有评分，也可以不显示任何评分。我还可以将其设置为一次只显示一个，但我认为这段代码最接近我需要的解决方案。

看起来在点击事件之后，不会为 StarRatings 可见性调用 shouldShowRatings 可见性。

示例代码也在 jsFiddle 上 http://jsfiddle.net/justinnafe/866my/4/

Answer 1

只需更新您的绑定(bind)即可使用 $data 作为第一个参数调用函数:http://jsfiddle.net/866my/6/

<ul data-bind="foreach: products">
    <li><span data-bind="text: ProductName"></span>
        <a href="#" data-bind="click: $parent.toggleVisibility($data)">Ratings</a> 
        <ul data-bind="foreach: StarRatings, visible: $parent.shouldShowRatings($data)">
            <li><span data-bind="text: RatingId"></span>: <span data-bind="text: RatingValue"></span></li>
        </ul>
    </li>
</ul>

重要的是您使用函数符号来获取绑定(bind)以检查更新。