Question

嗨，我想知道你是否可以提供帮助。这个问题一直困扰着我。我正在尝试根据<select>上的选定值填充文本框。从MVC后端填充<select> self.ApplicationsList = ko.observableArray(data.ApplicationsList); ApplicationsList只是List<Application>以下是我的实施。表中填充了多行角色。单击某行后，<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 ViewModel

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 observable发生更改时会激活，您可以更新其他可观察对象并执行其他任何操作。

例如：

self.ApplicationID.subscribe(function (val) {

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

});

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

1 个答案: