我想显示我的observableArray
中的10个项目并隐藏其余部分,当我向数组的开头添加新元素时隐藏10Th元素,并且用户能够点击显示更多项目
使用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中做到这一点
答案 0 :(得分:4)
我遇到了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了解完整的工作示例。它允许排序/过滤注释列表,添加到注释开始数组(未过滤数组)和显示更多。
答案 1 :(得分:0)
问题是我找不到如何访问observableArray
这是我的解决方案。
visible: $parent.comments.indexOf($data) < 2