1
およびKnockOutとChosenライブラリを使用しています。 RequireJSからcommonjsに変更し、現在はwebpackを使用してバンドルするまで、すべてうまくいきました。問題は、chosenの値を変更したときにknockout observableが更新されないという点です。選択されたドロップダウン値が変更されたときにノックアウト観測値が更新されない
RequireJsを使用して動作していたjavascriptコードは次のとおりです。
define(['knockout', 'text!./employee-setup.html', 'utils', 'panel-section', 'toastr', 'jquery', 'knockout-postbox', 'knockout-projections', 'chosen', 'jsteps'], function (ko, template, utils, PanelSection, toastr, $, _, _, _, jsteps) {
function EmployeeSetup(params) {
var self = this;
this.agentTypes = ko.observableArray();
this.agentType = ko.observable();
this.loadAgentTypes = function() {
$.ajax({
url: '/Employee/GetAgentTypes',
method: 'POST',
dataType: 'json',
success: function (result) {
if (utils.handleAjaxResult(result) && result.Data) {
self.agentTypes([]);
var agentType = [{ ID: "", Name: "" }];
$.each(result.Data, function (i, item) {
agentType.push({ID: item.ID, Name: item.Name});
});
self.agentTypes(agentType);
$('#agentType').chosen({ allow_single_deselect: true, width: '310px' });
$('#agentType').trigger("chosen:updated");
} else {
}
},
error: function() {
toastr.error('Could not load agent types');
}
});
};
self.loadAgentTypes();
};
return { template: template, viewModel: EmployeeSetup };
});
そのコンポーネントのHTML：
<div class="input-container" data-bind="">
<select data-bind="value: agentType, options: agentTypes, optionsText: 'Name'" data-placeholder="Select Agent Type..." id="agentType" class="chosen-select sp-uin-dropdown" tabindex="2"> </select>
</div>
はここcommonjs
var ko = require('knockout'),
utils = require('utils'),
PanelSection = require('panel-section'),
toastr = require('toastr'),
$ = require('jquery');
require('knockout-postbox');
function ViewModel(params) {
var self = this;
this.agentTypes = ko.observableArray();
this.agentType = ko.observable();
this.loadAgentTypes = function() {
$.ajax({
url: '/Employee/GetAgentTypes',
method: 'POST',
dataType: 'json',
success: function (result) {
if (utils.handleAjaxResult(result) && result.Data) {
self.agentTypes([]);
var agentType = [{ ID: "", Name: "" }];
$.each(result.Data, function (i, item) {
agentType.push({ID: item.ID, Name: item.Name});
});
self.agentTypes(agentType);
$('#agentType').chosen({ allow_single_deselect: true, width: '310px' });
$('#agentType').trigger("chosen:updated");
} else {
}
},
error: function() {
toastr.error('Could not load agent types');
}
});
};
self.loadAgentTypes();
}
module.exports = { viewModel: ViewModel, template: require('./template.html') };
を使用してコードだし、上記と同じhtmlファイルを使用しています。
webpack.config.jsには、jqueryとchosenのパスを定義します。
chosen dropdownが正しく読み込まれます。しかし、subscribeを観測可能にすると、ドロップダウンが変更されたときに値が更新されません。初期ロード時には、コンソールからの値しか表示されません。ここSOで
self.agentType.subscribe(function (value) {
console.log('value', value);
}, this)
いくつかの記事はbindingHandlersを使用することを示唆しました。私は私のアプリケーションでJSFiddleからこの作業コードを試しましたが、私は最初の負荷から値を取得します。
この問題を解決する方法や原因を教えてください。