使用 Knockout 从 <select> 填充文本框

Question

您好，我想知道您是否可以帮忙。这个问题一直困扰着我。我正在尝试根据<select> 上的选定值填充文本框。 <select> 是从 MVC 后端填充的 self.ApplicationsList = ko.observableArray(data.ApplicationsList); ApplicationsList 只是 List<Application> 下面是我的实现。表中填充了角色行。单击一行时，<input> 和 <select> 将填充正确的值。到现在为止还挺好。我希望进一步扩展，即当我在<select> 上选择不同的选项时，<input id="ApplicationDescription>" 应该填充基于self.ApplicationsList observable 的描述值。我只是无法理解这一点。

MVC 类

public class Application
{
    public int AppID { get; set; }
    public string AppName { get; set; }
    public string AppDesc { get; set; }
}

淘汰视图模型

var RoleVM = function (data) {
var self = this;

ko.mapping.fromJS(data, {}, self);

self.Roles = ko.observableArray(data.RolesList);
self.ApplicationsList = ko.observableArray(data.ApplicationsList);

self.RoleID = ko.observable();
self.RoleName = ko.observable();
self.Description = ko.observable();
self.ApplicationName = ko.observable();
self.ApplicationDescription = ko.observable();
self.ApplicationID = ko.observable();

self.GetSelectedRole = function (role) {
    self.RoleID(role.RoleID);
    self.RoleName(role.RoleName);
    self.Description(role.Description);
    self.ApplicationName(role.ApplicationName);
    self.ApplicationDescription(role.ApplicationDescription);
    self.ApplicationID(role.ApplicationID);
};

//New addition
self.SelectedApplication = ko.observable("");
self.ApplicationID.subscribe(function (value) {
    self.SelectedApplication(value);
});

};

查看

<table>
<thead>
    <tr>
        <th>RoleID</th>
        <th>RoleName</th>
        <th>Description</th>
        <th>ApplicationName</th>
        <th>ApplicationDescription</th>
        <th data-bind="visible: false"></th>
    </tr>
</thead>

<tbody data-bind="foreach: Roles">
    <tr data-bind="click: $root.GetSelectedRole" id="updtr">
        <td><span data-bind="text: RoleID"></span></td>
        <td><span data-bind="text: RoleName"></span></td>
        <td><span data-bind="text: Description"></span></td>
        <td><span data-bind="text: ApplicationName"></span></td>
        <td><span data-bind="text: ApplicationDescription"></span></td>
        <td data-bind="visible: false"><span data-bind="text: ApplicationID"></span></td>
    </tr>
</tbody>

<table data-bind="visible: ReadOnlyMode">
<tr>
    <td><label for="RoleID">Role ID:</label></td>
    <td><input data-bind="value: RoleID" type="text" id="RoleID" /></td>
</tr>
<tr>
    <td><label for="RoleName">Role Name:</label></td>
    <td><input data-bind="value: RoleName" type="text" id="RoleName" /></td>
</tr>
<tr>
    <td><label for="Description">Role Description:</label></td>
    <td><input data-bind="value: Description" type="text" id="Description" /></td>
</tr>
<tr>
    <td><label for="ApplicationName">Application:</label></td>
    <td><select data-bind="options: ApplicationsList, optionsText: 'AppName', optionsValue: 'AppID', value: ApplicationID"></select></td>
</tr>
<tr>
    <td><label for="ApplicationDescription">Application Description:</label></td>
    <td><input data-bind="value: SelectedApplication" type="text" id="ApplicationDescription" /></td>
</tr>

Answer 1

我认为您需要订阅您的 ApplicationID。

这将在 ApplicationID 可观察对象发生更改时触发，您可以更新其他可观察对象并执行您需要的任何其他操作。

例如：

self.ApplicationID.subscribe(function (val) {

    //Do what you need here to update other observables...

});