Нокаут кнопку массива радио и/или выпадающего списка на основе

Question

Сейчас я заселение радиокнопку из наблюдаемого массива,

<div data-bind="foreach: cars"> 
    <div> 
     <input type='radio' data-bind="checked: $root.vehicle, checkedValue: id, value:id"><span data-bind="text: model"></span> 
    </div> 
</div> 

Model data, 

public class MyViewModel 
{ 
    public List<Cars> cars {get; set;} 
} 
public class Cars 
{ 
    public int Id{get; set;} 
    public string Make {get; set;} 
    public string Model {get; set;} 
} 

Скажем, если я хочу населенной радиокнопки для Марка «Honda» и выпадающий список для макияжа " Toyota. Как это сделать?

В принципе, я пытаюсь заполнить два разных списка элементов управления из того же наблюдаемого массива.

Answer 1

Если я понимаю, что именно вы хотите сделать, вот пример через то, что вы могли бы сделать: Пример: https://jsfiddle.net/kyr6w2x3/85/

HTML:

<div data-bind="foreach: Cars"> 
     <input type='radio' data-bind="checked :$parent.VehicleSelected ,checkedValue: Make, value:Id"> 
     <span data-bind="text: Make"></span> 
     <select data-bind="foreach:Models,visible:IsSelected" > 
      <option data-bind="text:Name , value:Id"></option> 
     </select> 
     <br /> 
    </div> 

JS:

var data = [ 
{Id:1,Make :"TOYOTA",Model: [{Id:1,Name:"COROLLA"},{Id:2,Name:"CAMERY"},{Id:3,Name:"PERADO"}]}, 
{Id:2,Make :"HONDA",Model:[{Id:4,Name:"CIVIC"},{Id:5,Name:"ACCORD"},{Id:6,Name:"PILOT"}]}, 
{Id:3,Make :"NISSAN",Model:[{Id:7,Name:"SENTRA"},{Id:8,Name:"ALTIMA"},{Id:9,Name:"JUKE"}]}]; 

function AppViewModel() { 
var self = this ; 
self.Cars = ko.observableArray($.map(data, function (item) { 
     return new CarItemViewModel(item); 
})); 
    self.VehicleSelected = ko.observable(); 
    self.VehicleSelected.subscribe(function(newValue){ 
    ko.utils.arrayForEach(self.Cars(), function(item) { 
     if (item.Make().toUpperCase() === newValue.toUpperCase()) { 
      return item.IsSelected(true); 
     }else{ 
      return item.IsSelected(false); 
     } 
    }); 
    }) 

} 

var CarItemViewModel = function (data){ 
    var self = this ; 
    self.Id = ko.observable(data.Id); 
    self.Make = ko.observable(data.Make); 
    self.Models = ko.observableArray($.map(data.Model, function (item) { 
    return new ModelsItemViewModel(item); 
    })); 
    self.IsSelected = ko.observable(false); 
} 
var ModelsItemViewModel = function (data){ 
    var self = this ; 
    self.Id = data.Id; 
    self.Name = data.Name; 
} 
var appVM = new AppViewModel() 
ko.applyBindings(appVM); 

Answer 2

Моя интерпретация вопроса:

• У вас есть одна переменные, которая хранит все данные
• Вы хотите сделать множественного элементов пользовательского интерфейса, которые представляют собой подмножество этих данных

Хорошего способа сделать это с помощью ko.computed сек, что возвращает отфильтрованный результат observableArray. Пример:

var allCars = ko.observableArray([ 
    {"name":"CIVIC","make":"HONDA"}, 
    {"name":"SENTRA","make":"NISSAN"}]; 

var hondas = ko.computed(function() { 
    return allCars().filter(function(car) { 
    return car.make === "HONDA"; 
    }); 
}); 

Поскольку вычисленные использует allCars наблюдаемый, он получает уведомление при изменении источника данных. Метод filter переоценивается. В приведенном ниже фрагменте вы можете увидеть, что вы можете вводить новые данные в свой источник и автоматически помещаться в нужное подмножество!

var allCars = ko.observableArray([ 
 
    {"name":"CIVIC","make":"HONDA"}, 
 
    {"name":"ACCORD","make":"HONDA"}, 
 
    {"name":"PILOT","make":"HONDA"}, 
 
    {"name":"SENTRA","make":"NISSAN"}, 
 
    {"name":"ALTIMA","make":"NISSAN"}, 
 
    {"name":"JUKE","make":"NISSAN"}]); 
 

 
var hondas = ko.computed(function() { 
 
    return allCars().filter(function(car) { 
 
    return car.make === "HONDA"; 
 
    }); 
 
}); 
 

 
var nissans = ko.computed(function() { 
 
    return allCars().filter(function(car) { 
 
    return car.make === "NISSAN"; 
 
    }); 
 
}); 
 

 
var otherBrands = ko.computed(function() { 
 
    return allCars().filter(function(car) { 
 
     return car.make !== "NISSAN" && 
 
     car.make !== "HONDA"; 
 
    }); 
 
}); 
 

 
var inputVM = { 
 
    name: ko.observable(""), 
 
    make: ko.observable(""), 
 
    add: function() { 
 
    allCars.push({ 
 
     name: this.name(), 
 
     make: this.make().toUpperCase() 
 
    }); 
 
    } 
 
}; 
 

 
ko.applyBindings({ 
 
    hondas: hondas, 
 
    nissans: nissans, 
 
    allCars: allCars, 
 
    otherBrands: otherBrands, 
 
    inputVM: inputVM 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<h2>Honda</h2> 
 
<ul data-bind="foreach: hondas"> 
 
    <li data-bind="text: name"></li> 
 
</ul> 
 
<h2>Nissan</h2> 
 
<ul data-bind="foreach: nissans"> 
 
    <li data-bind="text: name"></li> 
 
</ul> 
 
<h2>Other brands</h2> 
 
<ul data-bind="foreach: otherBrands"> 
 
    <li data-bind="text: name"></li> 
 
</ul> 
 
<h2>Add car</h2> 
 
<div data-bind="with: inputVM"> 
 
    <label> 
 
    Name: 
 
    <input type="text" data-bind="value: name"> 
 
    </label> 
 
    <label> 
 
    Make: 
 
    <input type="text" data-bind="value: make"> 
 
    </label> 
 
    <button data-bind="click: add">Add</button> 
 
</div>