Question

似乎无法使同位素排序起作用：（

在网页的客户端，我正在显示来自外部json的数据，该数据带有使用handlebars.js的模板。

我希望用户能够对显示的数据进行排序，过滤和搜索。我已经看到，使用同位素可以成功实现这一目标。我确实设法使过滤工作。

但是，我始终坚持使用getSortData选项（该值来自json）来定位对象的类。

带有价格的JSON结构示例：

这是试图按价格排序的代码，首先是我的菜单：

        <ul id="sort">
         <li><a href="#original-order" data-sort="original-order" class="selected">original order</a></li>
         <li><a href="#number" data-sort="number">number</a></li>
        </ul>

然后是我的车把模板，我想在其中到达p.class = number：

    <div id="mcContainer"></div>

    <script id="mcTemplate" type="text/x-handlebars-template">

    {{#each this}} {{#annoncer}}
    <article class="mc_item {{category}} {{year}}">
        <a data-single href="{{id}}">
            <h3>{{brand}} {{model}}</h3>
            <img src={{images.0.small}} />
            <h4 class="mc_aar">ÅR: {{year}}, {{km}} km</h4>
            <p>{{category}}</p>
            <p class="mc_pris number">{{price}},-</p>
            <hr>
        </a>
    </article>
    {{/annoncer}} {{/each}}
</script>

还有我的JavaScript文件：

(function ($) {

"use strict";

// javascript code here. i.e.: $(document).ready( function(){} );
$(document).ready(function ($) {
    var $container = $('#mcContainer');
    $.ajax({
        url: "http://diegovega.dk/kea/2semester/json-eks/json-eks.json",
        method: "GET",
        dataType: 'json',
        success: function (response) {
            var template = $('#mcTemplate').html();
            var renderer = Handlebars.compile(template);
            var result = response;
            $('#mcContainer').html(renderer(result));
            runIsotope();
        }
    });

    function runIsotope() {
        var $items = $('.mc_item');
        $items.isotope({})
        $items.isotope('reloadItems')
            .isotope({
                itemSelector: '.mc_item',
                layoutMode: 'fitRows',
                fitRows: {
                    gutter: 20
                },
                getSortData: {
                    number: '.number parseInt'
                },
            });
        // Sort based on price
        $('#sort').on('click', function () {
            if ($(this).hasClass('checked')) {
                $(this).removeClass('checked');
                    .isotope({
                        sortBy: 'original-order'
                    });
            } else {
                $('#sort').removeClass('checked');
                var sortValue = $(this).attr('data-sort-value');
                console.log($(this).attr('data-sort-value'));
                    .isotope({
                        sortBy: sortValue
                    });
                $(this).addClass('checked');
            }
        });
    } //RUN ISOTOPE
}); // END DOCUMENT READY
})(jQuery); // END use strict

非常感谢您的帮助：）

Answer 1

初始化容器而不是项目上的同位素在链接上使用数据排序属性，点击

从使用车把渲染的外部json中进行同位素排序

1 个答案: