javascript - 在 ASP.NET WebForms 服务器端帖子之间持续 knockout ViewModel ...

Question

使用 CodeProject.com 上发布的这篇文章“Using KnockoutJS in your ASP.NET applications”作为指南，我尝试使用 ASP.NET 3.5 Web 窗体创建一个可重用的、加载数据的下拉列表，但它在客户端利用了 KnockoutJS数据绑定(bind)。此下拉列表的多个独立实例应该能够独立存在于同一页面中。

到目前为止，CodeProject.com 的帖子在指导我如何进行设置方面非常宝贵，我成功地将更新的 ViewModel 数据作为 JSON 字符串在服务器和客户端之间来回传递，并将其与 JSON 字符串相互转换对象(在服务器和客户端上)。我挂断的是什么应该是简单的部分；将 ViewModel 绑定(bind)到下拉列表!

所以我首先将 JSON 字符串加载到隐藏字段中。它包括区域列表和单个 SelectedRegion。

<input type="hidden" id="ddlRegionKO_hdnRegionListVMStorage" value="{&quot;Regions&quot;:[{&quot;RegionName&quot;:&quot;Mid Atlantic USA&quot;,&quot;RegionId&quot;:2},{&quot;RegionName&quot;:&quot;Mid West USA&quot;,&quot;RegionId&quot;:10},{&quot;RegionName&quot;:&quot;North Central USA&quot;,&quot;RegionId&quot;:5},{&quot;RegionName&quot;:&quot;North East USA&quot;,&quot;RegionId&quot;:1},{&quot;RegionName&quot;:&quot;North West USA&quot;,&quot;RegionId&quot;:7},{&quot;RegionName&quot;:&quot;Other&quot;,&quot;RegionId&quot;:9},{&quot;RegionName&quot;:&quot;South Central USA&quot;,&quot;RegionId&quot;:6},{&quot;RegionName&quot;:&quot;South East USA&quot;,&quot;RegionId&quot;:3},{&quot;RegionName&quot;:&quot;South West USA&quot;,&quot;RegionId&quot;:8}],&quot;SelectedRegion&quot;:{&quot;RegionName&quot;:&quot;North Central USA&quot;,&quot;RegionId&quot;:5}}" />

然后我使用 ko.utils.parseJson() 函数将这个字符串转换为 Javascript 对象。

var stringViewModel = document.getElementById("ddlRegionKO_hdnRegionListVMStorage").value;
var ddlRegionKO_pnlRegionDDLContainer_ViewModel = ko.utils.parseJson(stringViewModel);

然后我将属性定义转换为 ko.observable 和 ko.observableArray 方法(这是需要重构的部分之一，但作为概念证明就足够了)。

//
// Convert all the model properties to KO Propety/Methods
for (var propertyName in ddlRegionKO_pnlRegionDDLContainer_ViewModel) {
    switch(propertyName.toUpperCase())
    {
        //
        // Multiple Region objects are stored as an array in the regions property.
        case "REGIONS":
            ddlRegionKO_pnlRegionDDLContainer_ViewModel[propertyName] = ko.observableArray(ddlRegionKO_pnlRegionDDLContainer_ViewModel[propertyName]);
            break;
        //
        // Only a single region may be selected at any time.
        case "SELECTEDREGION":
            ddlRegionKO_pnlRegionDDLContainer_ViewModel[propertyName] = ko.observable(ddlRegionKO_pnlRegionDDLContainer_ViewModel[propertyName]);
        break;
    };
};

鉴于此，我希望在调用 applyBindings 方法时填充下拉列表并选择 SelectedRegion ...

ko.applyBindings(ddlRegionKO_pnlRegionDDLContainer_ViewModel);

我已经在 J​​SFiddle 将所有这些放在一起...... here ...我怀疑我可能忽略了某些东西，但我看不到它可能是什么。在我看来一切都很好。

如果有人能看到我忽略的东西，我将非常感激!

谢谢，

-g

Answer 1

您不需要在绑定(bind)中指定模型名称。而不是 options:ddlRegionKO_pnlRegionDDLContainer_ViewModel.Regions，只需使用 options:Regions 等

<select id="ddlRegionKO_ddlRegionList" 
    data-bind="options:Regions, 
        optionsText:'RegionName', 
        optionsValue:'RegionId',
        value:SelectedRegion, 
        optionsCaption:'Choose Region ...'">
</select>

Working fiddle

编辑:您还缺少一个 optionsValue 绑定(bind)，该绑定(bind)指定了您希望将哪个属性绑定(bind)到每个选项的值。我更新了 fiddle 以包含此更改。

编辑 2:好吧，您在 json 中选择的区域是一个对象。我看了看 knockout documentation关于绑定(bind)，我没有看到将所选值绑定(bind)到对象的方法，因此如果您可以修改 json，则只需指定所选值的 ID。

<input type="hidden" 
    id=".."
    data-bind="..a bunch of array stuff...  ,&quot;SelectedRegion&quot;:5}" 
/>

看到我在那里做了什么吗？我更换了对象

'SelectedRegion':{'RegionName':'North Central USA','RegionId':5}

只有:

'SelectedRegion':5

Updated fiddle is here .但这对您的文本框情况没有帮助，因为它会显示 ID 而不是文本框中的文本。这里有点晚了，所以我不太确定如何解决这个问题，但你可能会看here一些灵感。祝你好运。