Question

我有一个用于创建和更新项目的视图。由于下拉列表中的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属性应用订阅？

Answer 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>

如何订阅集合/ foreach DOM渲染中的项目

1 个答案: