这是我目前的标记

使用Javascript：

var itemViewModel = {
    item: {},
    isLoaded: ko.observable(false),
    comments: ko.observableArray([]),
    loadcontent: function (getID) {
        $.ajax({
            url: '/api/item/details/' + getID,
            dataType: 'json',
            success: function (data) {
                itemViewModel.item = data;
                itemViewModel.comments([]);
                $.each(data.Comments, function (index, thisComment) {
                    itemViewModel.comments.push(thisComment);
                });
                itemViewModel.comments.sort(function (a, b) {
                    return new Date(a.DateTime) == new Date(b.DateTime)
                        ? 0 : (new Date(a.DateTime) < new Date(b.DateTime) ? 
                        1 : -1)
                });
                itemViewModel.isLoaded(true);
                itemDetailBindings();
            }
        });
    },
    showComment: function (ele) {
        if (ele.nodeType === 1) $(ele).hide().fadeIn()
    }
};
//Item detail element bindings
var itemDetailBindings = function () {
    // Add auto expand to textarea
    $('#this-text-is-comment').TextAreaExpander(50, 200);
    //Add comment
    $('#this-text-is-comment').bind('keypress', function (e) {
        if (e.keyCode == 13) {
            e.preventDefault();
            if ($(this).val() != "") {
                addComment($("#this-text-is-comment").val(), $("#hidden-item-id").val());
                $(this).val('');
            };
        }
    });
};
var addComment = function (cText, getID) {
    $.ajax({
        url: '/api/comment/create',
        type: 'POST',
        dataType: 'json',
        data: { comment1: cText, itemid: getID },
        success: function (data) {
            itemViewModel.comments.splice(0, 0, data);
        }
        /*error: function (xhr, status) {
        switch (status) {
        case 404:
        alert('File not found');
        break;
        case 500:
        alert('Server error');
        break;
        case 0:
        alert('Request aborted');
        break;
        default:
        alert('Unknown error ' + status);
        }
        }*/
    });
};

HTML：

<div class="comment-list clearfix" data-bind="template: {foreach: comments, afterAdd: showComment }">
    <div class="comment-container clearfix">
        <div class="left-side">
            <img src="../../content/u/2012.08.17.634808075593134766.jpg" />
        </div>
        <div class="right-side clearfix">
            <div class="top">
                <span class="user-name" data-bind="text: User.FullName"></span><span class="time-posted"
                    data-bind="text: $.datepicker.formatDate('yy-mm-dd', new Date(DateTime))"></span>
            </div>
            <div class="middle clearfix">
                <div class="body">
                    <p data-bind="text: Comment1">
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

对于州议员：我不知道如何在ko.js中做到这一点

Answer 1

我遇到了computed filtered arrays（见提示2），但仔细思考后，您只需将Computed Observables和Javascript slice() method合并即可。

在以下示例中，您将绑定到filteredComments。 self.comments()是评论的主要列表，数组是排序，然后是切片以显示第一个＃条评论（self.commentsShown()）。< / p>

self.filteredComments = ko.computed(function() {
    return self.comments()
        .sort(compareComments) // important to sort before slicing
        .slice(0, self.commentsShown());
});

See fiddle了解完整的工作示例。它允许排序/过滤注释列表，添加到注释开始数组（未过滤数组）和显示更多。

Answer 2

问题是我找不到如何访问observableArray这是我的解决方案。

visible: $parent.comments.indexOf($data) < 2

显示observableArray中特定数量的元素并隐藏其余部分

这是我目前的标记

2 个答案: