Question

我想使用Html帮助程序和Knockout来创建从服务器到客户端的数据的无缝转换，然后在回发时再次返回服务器。

我的ViewModel有一些属性，然后是一个项目数组。我需要知道如何在ASP.NET Razor中迭代我的数组，同时将我的knockout绑定分配给数组中的各个元素。

这是我到目前为止所拥有的：

@for (int i = 0; i < Model.Fields.Count; i++)
{   
    <div name="customFormField" data-bind="with: Fields[@i]">
        <div class="form-group">
            @Html.LabelFor(m => m.Fields[i].SqlDataType)
            @Html.ListBoxFor(m => m.Fields[i].SqlDataType, new SelectList(selectDataTypeOptions), new { @class = "form-control", data_bind = "value: SqlDataType" })
        </div>
    </div>  
}

我的ko javascript：

<script>
    function viewModel() {
        this.addField = function() {
            alert("wut");
        }
    }

    $(function (){
        var jsonModel = @Html.Raw(Json.Encode(Model));
        var mvcModel = ko.mapping.fromJS(jsonModel);

        var customFormTemplateViewModel = new viewModel();
        var g = ko.mapping.fromJS(customFormTemplateViewModel, mvcModel);

        ko.applyBindings(g);
    });
</script>

当我浏览页面时，唯一呈现的元素是<div name="customFormField" data-bind="with: Fields[x]"></div>元素，它们内部的表格组div和标签/列表框都没有在页面上创建。

KnockoutJS没有绑定错误。

如果我删除了data-bind="with: Fields[@i]"，其他元素就会正确渲染，所以它必须是尝试绑定到数组中的元素并使其横向移动的东西，但我没有＆＃39;能够弄清楚是什么。

编辑：这是从中输出的Html：

这很有意思，因为如果我使用chrome的检查器检查DOM，它不会在每个customFormField div中显示任何内容，但在源代码中它确实包含了内部元素。它在每个项目中输出System.Web.Mvc.SelectListItem，但我认为我的SelectList错了。

    <div name="customFormField" data-bind="with: Fields[0]">
        <div class="form-group">
            <label for="Fields_0__SqlDataType">SqlDataType</label>
            <select class="form-control" data-bind="text: SqlDataType" id="Fields_0__SqlDataType" multiple="multiple" name="Fields[0].SqlDataType"><option>System.Web.Mvc.SelectListItem</option>
<option>System.Web.Mvc.SelectListItem</option>
<option>System.Web.Mvc.SelectListItem</option>
<option>System.Web.Mvc.SelectListItem</option>
</select>
        </div>
    </div>  
    <div name="customFormField" data-bind="with: Fields[1]">
        <div class="form-group">
            <label for="Fields_1__SqlDataType">SqlDataType</label>
            <select class="form-control" data-bind="text: SqlDataType" id="Fields_1__SqlDataType" multiple="multiple" name="Fields[1].SqlDataType"><option>System.Web.Mvc.SelectListItem</option>
<option>System.Web.Mvc.SelectListItem</option>
<option>System.Web.Mvc.SelectListItem</option>
<option>System.Web.Mvc.SelectListItem</option>
</select>
        </div>
    </div>  
    <div name="customFormField" data-bind="with: Fields[2]">
        <div class="form-group">
            <label for="Fields_2__SqlDataType">SqlDataType</label>
            <select class="form-control" data-bind="text: SqlDataType" id="Fields_2__SqlDataType" multiple="multiple" name="Fields[2].SqlDataType"><option>System.Web.Mvc.SelectListItem</option>
<option>System.Web.Mvc.SelectListItem</option>
<option>System.Web.Mvc.SelectListItem</option>
<option>System.Web.Mvc.SelectListItem</option>
</select>
        </div>
    </div>  
    <div name="customFormField" data-bind="with: Fields[3]">
        <div class="form-group">
            <label for="Fields_3__SqlDataType">SqlDataType</label>
            <select class="form-control" data-bind="text: SqlDataType" id="Fields_3__SqlDataType" multiple="multiple" name="Fields[3].SqlDataType"><option>System.Web.Mvc.SelectListItem</option>
<option>System.Web.Mvc.SelectListItem</option>
<option>System.Web.Mvc.SelectListItem</option>
<option>System.Web.Mvc.SelectListItem</option>
</select>
        </div>
    </div>  
    <div name="customFormField" data-bind="with: Fields[4]">
        <div class="form-group">
            <label for="Fields_4__SqlDataType">SqlDataType</label>
            <select class="form-control" data-bind="text: SqlDataType" id="Fields_4__SqlDataType" multiple="multiple" name="Fields[4].SqlDataType"><option>System.Web.Mvc.SelectListItem</option>
<option>System.Web.Mvc.SelectListItem</option>
<option>System.Web.Mvc.SelectListItem</option>
<option>System.Web.Mvc.SelectListItem</option>
</select>
        </div>
    </div>

编辑2：我尝试text绑定时会显示此示例，但我已尝试过两种方式。

编辑3：我将输出Html复制到页面上的其他位置，它也没有渲染，直到我从包含div中删除了data-bind="with: Fields[n]"，所以问题似乎就在那里。但是，如果我从实际文件中的父项中删除它，我会从data-bind="value: SqlDataType"

收到绑定错误

如何在服务器循环中使用Knockout视图模型？

0 个答案: