各位晚安。我对 knockout.js 有这个问题。我正在使用表格过滤表单,它有 2 个下拉列表,一个父级和一个子级。该表由下拉列表之一或两者过滤。但是,如果我更改第一个下拉列表,第二个将通过 ajax 调用进行过滤。问题是,当页面加载到 html 上时,应该填充两个下拉列表。正在恢复。我要做的是从填充的下拉列表中过滤或删除现有选项,并填充过滤后的选项。
到目前为止的代码:
HTML(它是一个 Blade 模板,它可以很好地渲染 html,编辑:这些值不是真正的值,只是放一些)
<div class="span3">
<div class="control-group">
<label class="control-label">messages.form_elemento_dependencia:</label>
<select name="f_dependencia" data-bind="value: dependencia" id="f_dependencia" class="span12 campos_busqueda_bienes">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</div>
<div class="span3">
<div class="control-group">
<label class="control-label">messages.form_elemento_coordinacion:</label>
<select id="options:coordinacionData, optionsText: "description",optionsCaption: "Seleccione", optionsValue: "id", value: coordinacion" class="span12 campos_busqueda_bienes" name="f_coordinacion">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
</div>
JS(我知道我还没有找到的协调数据数组缺少一些东西)
var ViewModel = function() {
var self = this;
self.dependencia = ko.observable();
self.coordinacion = ko.observable();
self.descripcion = ko.observable();
self.dt = _sitiosDt;
self.coordinacionData = ko.observableArray([]);
self.bienes_t = ko.observableArray([]);
self._filtra_dt = function(){
_sitiosDt.fnDraw();
};
self.filtra_dt_click = function(data, event){
self._filtra_dt();
};
self.filtra_dt = function(data, event){
if(event.keyCode == 13){
self._filtra_dt();
}
return true;
};
self.limpia_campo_busqueda = function(){
self.dependencia('');
self.descripcion('');
};
self.dependencia.subscribe(function(newDependencia) {
if(newDependencia){
$.getJSON("/coordinacionesjson", {'d':newDependencia}, function(data) {
var mappedData = $.map(data, function(item) { return new Item(item.id, item.description) });
self.coordinacionData(mappedData);
});
self.coordinacion('');
}
});
};
my = {viewModel : new ViewModel(_sitiosDt)};
ko.applyBindings(my.viewModel);