嗨我有一个问题,以创建正确的功能来显示/隐藏元素。目标很简单,当你点击列表元素时,你会看到div(模板)和更多信息。现在你必须再次点击这个相同的列表元素来隐藏这个元素。我想要做什么: 例如,当我点击列表中的第一个元素并且此元素的模板将显示时,我转到列表中的第二个元素(或最后一个或其他),然后单击它,我想要隐藏所有打开的元素(模板),但我只想看到我单击的元素的活动元素。现在我可以在同一时间打开许多元素,并且我想将其更改为只打开活动元素并隐藏所有其他元素。这在knonckout中可以做到吗?或者,也许我必须使用jQuery的呢?在jsfiddle淘汰赛隐藏所有不活跃的元素
HTML实例
<form action="#">
<input placeholder="Search…" type="search" name="q" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off">
</form>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<ul class="name-list" data-bind="foreach: filteredPeople">
<li data-bind="attr:{class: $index == 0 ? 'active' : ''}, click: toggleshowMoreInfo" role="button">
<span class="full-name" data-bind="text: fullName"></span>
</li>
<div class="hidden-sm hidden-md hidden-lg" data-bind="slideVisible: showMoreInfo, fadeDuration:600,template: {name: 'person-template'}"></div>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 hidden-xs" data-bind="foreach: filteredPeople">
<div class="row" data-bind="slideVisible: showMoreInfo, fadeDuration:600,template: {name: 'person-template'}"></div>
</div>
</div>
</div>
<!-- template for presonal information -->
<script type="text/html" id="person-template">
<div class="col-xs-12 col-md-6">
<p><span data-bind="text: fullName"></span></p>
</div>
</script>
JS
var data = [
{
"index": 0,
"name": [{
"first": "Barlow",
"last": "Moore"
}]
},
{
"index": 1,
"name": [{
"first": "Valeria",
"last": "Meadows"
}]
},
{
"index": 2,
"name": [{
"first": "Constance",
"last": "Singleton"
}]
},
{
"index": 3,
"name": [{
"first": "Wilder",
"last": "Steele"
}]
}
];
var stringStartsWith = function (startsWith, string) {
string = string || "";
if (startsWith.length > string.length)
return false;
return string.substring(0, startsWith.length) === startsWith;
};
ko.bindingHandlers.slideVisible = {
update: function(element, valueAccessor, allBindings) {
var value = valueAccessor();
var valueUnwrapped = ko.unwrap(value);
var duration = allBindings.get('fadeDuration') || 400;
if (valueUnwrapped == true)
setTimeout(function(){ $(element).fadeIn(duration); }, duration);
else
$(element).fadeOut(duration);
}
};
/* show all data from json */
function PersonInfo(data) {
this.firstName = ko.observable(data.name[0].first);
this.lastName = ko.observable(data.name[0].last);
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
this.showMoreInfo = ko.observable(false);
this.toggleshowMoreInfo = function() {
this.showMoreInfo(!this.showMoreInfo())
}
}
function PersonInfoViewModel() {
var self = this;
self.query = ko.observable('');
self.mappedPersonalData = $.map(data, function(item) {
return new PersonInfo(item)
});
self.filteredPeople = ko.computed(function() {
return self.mappedPersonalData.filter(function (value) {
if(self.query() === '' || self.query() === null){
return true; //no query
}
if (stringStartsWith(self.query().toLowerCase(), value.firstName().toLowerCase()) || stringStartsWith(self.query().toLowerCase(), value.lastName().toLowerCase())){
return true;
}
return false;
});
});
}
var viewModel = new PersonInfoViewModel();
$(document).ready(function() {
ko.applyBindings(viewModel);
});
谢谢大家格雷厄姆这是非常有益的。 – mcmac