如何使用剔除将数据绑定到对象列表？

Question

这是我的视图模型。

服务器端：

public class ShoppingListModel
{
    public string Name { get; set; }
    public List<ItemModel> Items{ get; set; }

    public ShoppingListModel()
    {
        Items=new List<ItemModel>();
    }
}

在客户端，我使用knockout.mapping 。

ShoppingListModel = function(data) {
    var vm = ko.mapping.fromJSON(data);
    return vm;
};

要将服务器端模型绑定到客户端模型：

@{
    var jsonSerializerSettings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };
    var data = new JavaScriptSerializer().Serialize(JsonConvert.SerializeObject(Model, jsonSerializerSettings));
}

@section scripts {
<script src="~/App/ShoppingListModel.js"></script>

    <script>    
        var vm = ShoppingListModel(@Html.Raw(data));
        ko.applyBindings(vm);
    </script>
}

上面的代码：

1. 使用JSON.NET将服务器端Model序列化为驼峰式json。
2. 建立客户端视图模型。
3. ko.applyBinding（）

现在，我想利用双向绑定。

首先，我测试了Name ：

@Html.HiddenFor(model => model.Name, new { @data_bind="value:name"})
<input type="text" data-bind="value:name"/>

一切顺利，我能够在文本input编辑Name值，并将该值保留到隐藏的input 。 提交表单后，更新后的值可能会达到POST操作。

现在的问题是：如何在列表上实现绑定？

我的测试是从“项目”列表中删除一项：

@Html.HiddenFor(model => model.Items, new { data_bind = "value: items" })

<tbody data-bind="foreach:items">
    <tr>
        <td>

            <span data-bind="text:name"></span>
        </td>
        <td><span data-bind="text:count"></span></td>
        <td>
            <button class="btn btn-xs" data-bind="click:$parent.remove">
                <i class="fa fa-trash"></i>
            </button>
        </td>
    </tr>
</tbody>

console.log()告诉我客户端模型已经更新，但是这次， HiddenFor上的HiddenFor从未起作用！ 提交表单后， Items始终为null。

我认为这是合理的，因为在HTML中：

<input type="hidden" value="xxx" />

我们期望输入的值是一个简单的值。

我正在考虑遍历列表并从那里进行数据绑定。 但这也是困难的。 敲除foreach在tbody标签上，而C＃ foreach放在tr周围（ tbody内部）。

那么绑定列表的正确方法是什么？

---

这是根据Fabio的建议我的解决方案：

1. 在客户端ko模型中，

添加计算值以将列表绑定到json字符串中。

vm.itemsJson = ko.computed(function() {
    return ko.toJSON(vm.items);
},this);

2. 在html视图中，

添加一个隐藏的输入来保存json字符串并以我们的表单发布。

<input name="itemsjson" type="hidden" data-bind="value:itemsJson"/>

3. 在服务器侧视图模型中，

除了

public List<ItemModel> Items{ get; set; }

添加另一个字符串属性以保存发布的json。

public string ItemsJson { get; set; }

至此，我们可以看到ItemsJson值已成功发送到控制器操作。

4. 将json字符串解析到服务器端的列表。

由于它是类型化模型，因此我们将使用JSON.Net进行反序列化。

var items=JArray.Parse(model.ItemsJson);

model.Items = items.
    Select(i => new ItemModel {Name = (string) i["name"], Count = (int) i["count"]})
    .ToList();
return View(model);

确保将JArray.Parse()用于List而不是JObject.Parse() 。

有用。

让我们看看是否有比手动解析json字符串更好的方法。 否则，我将在本周末之后将法比奥的答案标记为我们的解决方案。

Answer 1

您可以使用计算的可观察值绑定隐藏字段，如下所示：

function YourViewModel() {
     var self = this;
     self.items = ko.observableArray(); //fill it with your stuff;
     self.valueForHiddenField = ko.computed(function() {
         return ko.toJSON(self.items);
     }, this); //use this observable as value of your hidden field
}

有关更多信息，请访问http://knockoutjs.com/documentation/json-data.html

编辑1

您无需在控制器内部转换json。 而不是将json发送到您的服务器，而是使用隐藏字段列表发送集合。 像这样：

<form>
   <!-- ko foreach: items -->
       <input type="hidden" data-bind="value: property1, attr: { name: 'Items[' + $index() + '].Property1' }">
        <input type="hidden" data-bind="value: property2, attr: { name: 'Items[' + $index() + '].Property2' }">
   <!-- /ko -->

</form>

然后，您可以发送帖子，而不必担心集合，当您更改项目observableArray时，它将自动刷新。