1
工作我採取這種例子淘汰賽JS複選框濾波器ko.utils.arrayFilter
http://knockoutjs.com/examples/animatedTransitions.html
，取而代之的複選框我有工作的無線電投入，如果我manualy返回planet.type但我需要返回多於1個planet.type 例1 http://www.html5imageeditor.co.uk/kopush/filter.php 例2 http://www.html5imageeditor.co.uk/kopush/filter2.php
查看
<label><input type='checkbox' name="type" data-bind='value: "all" ,checked: typeToShow' />All</label>
<label><input type='checkbox' name="type" data-bind='value: "rock" ,checked: typeToShow' />Rock</label>
<label><input type='checkbox' name="type" data-bind='value: "gasgiant" ,checked: typeToShow' />Gas Giant</label>
<div data-bind='template: { foreach: planetsToShow,
beforeRemove: hidePlanetElement,
afterAdd: showPlanetElement }'>
<div data-bind='attr: { "class": "planet " }'><span data-bind="text: name "></span></div>
</div>
模型
var PlanetsModel = function() {
this.planets = ko.observableArray([
{ name: "Mercury", type: "rock"},
{ name: "Venus", type: "rock"},
{ name: "Earth", type: "rock"},
{ name: "Mars", type: "rock"},
{ name: "Jupiter", type: "gasgiant"},
{ name: "Saturn", type: "gasgiant"},
{ name: "Uranus", type: "gasgiant"},
{ name: "Neptune", type: "gasgiant"},
{ name: "Pluto", type: "rock"}
]);
this.typeToShow = ko.observableArray(["all"]);
this.planetsToShow = ko.computed(function() {
var desiredType = this.typeToShow();
if (desiredType == "all") return this.planets();
return ko.utils.arrayFilter(this.planets(), function(planet) {
return planet.type == 'rock' || planet.type == 'gasgiant';//shows all how can i oproduce this result dynamicly ?
//return planet.type == 'rock' shows just the rock
});
}, this);
this.showPlanetElement = function(elem) { if (elem.nodeType === 1) $(elem).hide().slideDown() }
this.hidePlanetElement = function(elem) { if (elem.nodeType === 1) $(elem).slideUp(function() { $(elem).remove(); }) }
};
ko.bindingHandlers.fadeVisible = {
init: function(element, valueAccessor) {
var value = valueAccessor();
$(element).toggle(ko.utils.unwrapObservable(value));
},
update: function(element, valueAccessor) {
var value = valueAccessor();
ko.utils.unwrapObservable(value) ? $(element).fadeIn() : $(element).fadeOut();
}
};
ko.applyBindings(new PlanetsModel());
，你可以看到返回手動設置我需要創建它動態地像planet.type ==「搖滾」 || planet.type ==「gasgiant」希望讓SENCE
謝謝