Question

我正在使用淘汰赛在页面上显示项目。我有一个组列表ex：Group 1，Group 2，...每个组都在它自己的div中。当我点击其中一个组时，它将打开并显示组中的项目。我的一些团体没有任何要显示的项目，而是没有显示任何我要更改的内容显示：“组中没有项目”

我在javascript视图中无法做到这一点，并且我认为我可以在我的knockout / jquery脚本中执行此操作

查看：

<div class="accordion-group elements-by-item">
        <div class="accordion-heading">
            <a class="ui_title accordion-toggle text_x-large item_accordion_toggle" data-toggle="collapse" data-parent="#ByTimeIndex"
                data-bind="text: Title() != null ? Title() : Identity(), attr: { 'href': '#itemContent_' + Id(), 'data-item-id': Id() }">
            </a>
        </div>
        <div class="accordion-body collapse state-loading" data-bind="attr: { 'id': 'itemContent_' + Id(), 'data-item-id': Id() }">
            @Html.Partial("_itemElements")
        </div>
    </div>


    **_itemElements Page:**

    <div class="accordion-inner no_border" data-bind="foreach: Children">
                        <div class="element">
                        ........
                        </div>
    <div>

knockout / Jquery js

$idx.ItemsRetrieved = new Array();

    $idx.GetItemContent = function (element) {
        var _itemId = element.attr('data-item-id');
        var _elementData = $idx.itemData;

        this.GetElementContent({
            groupId: _itemId,
            groupData: _elementData.items,
            elementData: _elementData,
            apiUrl: _courseIndexOptions.GetitemUrlPrefix + _itemId,
            accordionBodySelector: '.accordion-body[data-item-id="' + _itemId + '"]',
            accordionBtnSelector: 'a[data-item-id="' + _itemId + '"]',
            viewModel: $idx.TimeViewModel
        });
    }

    $idx.GetElementContent = function (options) {
        if (linq.From($idx.ItemsRetrieved).Any(function (x) { return x == options.groupId })) {
            $(options.accordionBodySelector).removeClass(constants.StateClasses.Loading);           
            return;                                                                                 
        }

        return Ajax.Get({
            Url: options.apiUrl,
            OnSuccess: function (data) {
                var _items = linq.From(options.groupData);                                          
                var _itemToUpdate = _items.Where(function (x) { return x.Id == options.groupId; });
                if (_itemToUpdate.Any()) {
                    _itemToUpdate.First().Children = data.Items;                                
                }

                ko.mapping.fromJS(options.elementData, options.viewModel);                         
                sections.ElementArray.AddRange(data.Items);                                     

                $(options.accordionBodySelector).removeClass(constants.StateClasses.Loading);       
                $idx.ItemsRetrieved.push(options.groupId);                                       
                $(options.accordionBtnSelector).click();                                           
            }
        });

如何检查子项ItemsRetrieved = 0并设置消息“No Items”以显示在视图页面中？

Answer 1

你可以这样做：

<div class="accordion-inner no_border" >
    <div data-bind="foreach: Children">
        <div class="element">
        </div>
    </div>
    <span data-bind="if : Children().length == 0">No items in group</span>
<div>

我希望它有所帮助。

在淘汰赛中检查返回的孩子

1 个答案: