使用knockoutjs在值更改时触发函数

时间:2016-11-21 17:42:07

标签: javascript jquery knockout.js

当用户从组合框<select>

中选择其他值时,我想触发一个函数

HTML

<div class="wrapper wrapper-content" id="appGradeHorariaCompleta">
   <select class="form-control m-b" data-bind="options: Curriculos,optionsText:'Text',optionsValue:'Value',optionsCaption:'Selecione', value: CurriculoSelected, event:{ change: $parent.CurriculosChanged}"></select>
</div>

JS

function PainelViewModel() {
    var self = this;
    self.Curriculos = ko.observableArray([]);
    self.CurriculosChanged = (function (curriculo) {
        console.debug(curriculo);
    });
}

function CurriculoViewModel() {
    var self = this;
    self.Id = ko.observable(0);
    self.Value = ko.observable('');
    self.Selected = ko.observable(0);
}
...GET DATA...
...
..
.
$(data.CurriculoComboBox).each(function (index, item) {
    var model = new CurriculoViewModel();
    model.myvalues = item.myValues;
    painelVM.Curriculos().push(model);
});

ko.applyBindings(painelVM, document.getElementById("appGradeHorariaCompleta"));

我想要的是当组合框中的值发生变化时我想让这个参数绑定另一个函数。

但在我完成的方式中,我收到了一个错误:

 Unable to process binding "event: function (){return { change:$parent.HabilitacoesCursosChanged} }

2 个答案:

答案 0 :(得分:1)

首先,你的视图模型真的搞砸了。您可能需要使用data-bind中使用的变量名进行更改以匹配viewmodel中的变量名。我希望我能帮到你。你想要的是在组合框的值改变时触发方法。为此,有一种更简单的方法可以在observable(你的组合框值)上使用subscribe。因此,只要组合框的值发生变化,就会触发订阅功能。您想要的功能在订阅函数中作为函数体传递。

HTML:

<div class="wrapper wrapper-content" id="appGradeHorariaCompleta">
 <select class="form-control m-b" data-bind="options:Curriculos, optionsText:'Text',optionsValue:'Value',optionsCaption:'Selectone', value: CurriculoSelected"></select>
</div>

使用Javascript:

function CurriculoViewModel() {
    var self = this;
    self.Curriculos = ko.observableArray([]);
    self.CurriculoSelected = ko.observable('');
    self.CurriculoSelected.subscribe(function(value) {
        // Your change functionality goes here combobox.
    });
}

参考文献检查订阅: Knockout observables subscribe

Knockout options binding

答案 1 :(得分:1)

订阅不起作用,所以我仍然使用event: {change: $parent.CurriculosChanged}

所以,使用siddhearth中的ideia来获取从我的var中选择的值,我可以获得新值,更改$parent的{​​{1}}

<强> HTML

$root

<强> JS

<select class="form-control m-b" data-bind="options: Curriculos,optionsText:'Text',optionsValue:'Value',optionsCaption:'Selecione', value: CurriculoSelected, event:{ change: $root.CurriculosChanged}"></select>

Check binding context