4

たとえば、私の 10 個のアイテムをobservableArray表示し、残りのアイテムを非表示にしたいのですが、配列の先頭に新しい要素を追加すると、10 番目の要素が非表示になり、ユーザーがクリックしてさらにアイテムを表示できるようになります。

ここに私の現在のマークアップがあります

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>

staters の場合: ko.jsでそれを行う方法がわかりません

4

2 に答える 2

4

計算されたフィルター処理された配列(ヒント 2 を参照) に出くわしましたが、これを熟考した後、 Computed ObservablesとJavascriptslice()メソッドを組み合わせるだけでこれを行うことができます。

次の例では、にバインドしますfilteredComments。self.comments()はコメントのメイン リストです。配列は並べ替えられてからスライスされ、最初の数のコメントが表示されます ( self.commentsShown())。

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

完全な動作例については、フィドルを参照してください。コメントの並べ替え/フィルター処理されたリストを許可し、コメント配列 (フィルター処理された配列ではなく) の先頭に追加し、さらに表示します。

于 2012-08-24T22:12:27.140 に答える
0

observableArray問題は、ここにアクセスする方法が見つからなかったことです。これが私の解決策です。

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

于 2012-08-24T19:46:57.340 に答える