Javascript 如何在knockout js中绑定表中的默认选定行

在我的应用程序中，Iam通过调用Web Api服务绑定了一个表

我已经编写了代码，用于在选择特定行时显示所选行，并且工作正常

现在，我想在web api方法返回成功消息后，在默认情况下显示所选行

我应该如何在success方法中调用'SelectConfig'。当我尝试时，它什么也没有返回。请帮我摆脱这些问题

我的HTML：

<tbody data-bind="foreach: datas">
    <tr>
       <td style="vertical-align: middle;">
           <asp:CheckBox ID="chkChild" runat="server" />
       </td>
       <td style="vertical-align: middle;">
           <a id="aTag" data-bind="text: (Name().length > 20 ? Name().substring(0, 20) + '....' : Name()), value: ID, click: $parent.SelectConfig"></a>
       </td>
       <td style="vertical-align: middle;" data-bind="text: Type == '' || Type == null || Type == undefined ? '--' : Type"></td>
   </tr>
</tbody>

<div data-bind="with: Selected, visible: isVisibleDetails">
    <div class="col-md-8 value" data-bind="text: (Name() == '' || Name() == null || Name() == undefined) ? '--' : Name">
    <select id="ddlType_E" data-bind="options: $root.ddlTypes, optionsText: 'Type', optionsValue: 'ID', optionsCaption: 'Select..', value: selectedTypeId" class="form-control"></select>
</div>

我的视图模型：

<script type="text/javascript">
    function oppConfig(ID, Name,TypeID) {
        this.ID = ko.observable(ID);
        this.Name = ko.observable(Name);
        this.selectedTypeId = ko.observable(TypeID);
    }
    function ViewModel() {
        var self = this;
        this.datas= ko.observableArray([]);
        getdatas();

        this.ddlTypes = ko.observableArray([]);
        getOppType();
    }
    this.Selected = ko.observable(this.datas()[0]);

        //selectItem
        this.SelectConfig = function (oppConfig) {
            alert(ko.toJSON(oppConfig));
            self.Selected(oppConfig);
        }
    function datas() {
            $.ajax({
                type: "GET",
                url: '---',
                dataType: "json",
                cache: false,
                crossDomain: true,
                processData: true,
                success: function (data) {
                    self.datas.destroyAll();
                    if (data.length > 0) {
                        $.each(data, function (index) {
                            self.datas.push(new oppConfig(data[index].ID, data[index].Name,  data[index].Type));
                        });

                  //Here, I want the to call the select config
                    }
                    else {

                    }
                },
                error: function (data) {

                }
            });
        }
ko.applyBindings(new ViewModel());
</script>

函数oppConfig（ID、Name、TypeID）{
this.ID=ko.可观察（ID）；
this.Name=ko.observable（Name）；
this.selectedTypeId=ko.observable（TypeID）；
}
函数ViewModel（）{
var self=这个；
this.datas=ko.observearray（[]）；
getdatas（）；
this.ddlTypes=ko.observableArray（[]）；
getOppType（）；
}
this.Selected=ko.observable（this.datas（）[0]）；
//选择项
this.SelectConfig=函数（oppConfig）{
警报（ko.toJSON（oppConfig））；
自选（oppConfig）；
}
函数数据（）{
$.ajax({
键入：“获取”，
url:“--”，
数据类型：“json”，
cache:false，
跨域：是的，
processData：对，
成功：功能（数据）{
self.data.destroyAll（）；
如果（data.length>0）{
$。每个（数据、函数（索引）{
self.datas.push（新的oppConfig（数据[index].ID，数据[index].Name，数据[index].Type））；
});
//在这里，我希望调用select config
}
否则{
}
},
错误：函数（数据）{
}
});
}
应用绑定（新的ViewModel（））；

您需要在HTML标记中包含到

元素的数据绑定。现在，您有所选内容的显示div，但没有所选值本身

<tbody data-bind="foreach: model.datas">
    <tr data-bind="click: $root.selectThing, css: { selected: isSelected} ">

最后，在表示config类的对象中，添加一个isSelected变量，它是一个敲除函数

function oppConfig(ID, Name,TypeID) {
    this.ID = ko.observable(ID);
    this.Name = ko.observable(Name);
    this.selectedTypeId = ko.observable(TypeID);
    self.isSelected = ko.computed(function(){
        return selected() === self;
    }
}

一些CSS用于显示您的选择：

.selected { background-color: yellow; }

thead tr {
    border:1px solid black;
    background:lightgray;
}
tbody tr {
    border:1px solid black;
    cursor: pointer;
}

---

它是否显示任何错误一件事不初始化self.selected=ko.observable（this.datas（）[0]）；因为当脚本开始执行时，它可能会显示错误，因为此时数据数组中没有数据

this.Selected

应该在

ViewModel

中，我相信并尝试类似的方法来访问

this.SelectConfig

demo fiddle这里干杯

.selected { background-color: yellow; }

thead tr {
    border:1px solid black;
    background:lightgray;
}
tbody tr {
    border:1px solid black;
    cursor: pointer;
}