如何订阅 collection/foreach DOM 渲染中的项目答案

【问题标题】：How to subscribe to items in collection/foreach DOM rendering如何订阅 collection/foreach DOM 渲染中的项目
【发布时间】：2015-09-26 19:19:38
【问题描述】：

我有一个用于创建和更新项目的视图。由于下拉列表上的change 事件，我在更新函数运行两次的位置时遇到此问题。 my previous post 中的建议是我使用对值的订阅并在订阅中相应地创建逻辑。我认为这是一个好主意，但是，我不知道在从后端控制器方法发送到视图的视图模型动态应用绑定时，如何将这些订阅应用到我的模型。

集合项从foreach 元素循环中提供的数据绑定值以及使用$data 获取其功能。最好为解决方案保留这种格式。

    <tbody data-bind="foreach: koModel.ModelData.Lines">
        <tr class="form-group">
            <td>...</td>
            <td>..other model properties..</td>
            <td>...</td>
            <!-- v v v This is the property with the change event v v v -->
            <td>@Html.SearchPickerMvcKOMultipleFor(
                    m => m.ItemNumber, 
                    "ItemPicker",
                    new { @class = "form-control" }.AddMore(
                        "data-bind", 
                        "MyProgramSearchPicker: ItemNumber, value: $data.ItemNumber, event: { change: ItemNumericDetails($data) }"
                    ))</td>
            <!-- ^ ^ ^ ^ ^ -->
            <td>etc</td>
        </tr>
    </tbody>

模型先转换为 JSON，然后再转换为 JavaScript 变量：

@{ 
    Newtonsoft.Json.JsonSerializer serializer = new Newtonsoft.Json.JsonSerializer();
    string data = Newtonsoft.Json.JsonConvert.SerializeObject(Model);
    @Html.Raw("var modelData = " + data + ";");
}

var koModel = new KOModel(modelData);

如何通过从元素执行内联函数或其他可以修改动态呈现的集合的方法来应用对 ItemNumber 属性的订阅？

【问题讨论】：

我认为您可以订阅koModel.ModelDate.Lines 并从那里开始。
在这种情况下 $data.ItemNumber 应该是一个可观察的属性。

标签： javascript c# jquery asp.net-mvc knockout.js

【解决方案1】：

创建一个代表koModel.ModelData.Lines“线”的类

function Line(itemNumber) {
   var self = this;
   self.ItemNumber = ko.observable(itemNumber);

   self.ItemNumber.subscribe(...);
};

koModel.ModelData.Lines.push(new Line(123));

或者，您可以在视图模型中创建一个函数：

function koModel() {
   ...
   self.ItemNumericDetails = function (line) {
      //do your job
   };
};

在 HTML 中：

<td>
@Html.SearchPickerMvcKOMultipleFor(
                    m => m.ItemNumber, 
                    "ItemPicker",
                    new { @class = "form-control" }.AddMore(
                        "data-bind", 
                        "MyProgramSearchPicker: ItemNumber, value: $data.ItemNumber, event: { change: $root.ItemNumericDetails }"
                    ))
</td>

【讨论】：