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

Question

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

MVC 类

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

knockout View 模型

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...

});