具有动态创建的局部视图的 KnockoutJS答案

【问题标题】：KnockoutJS with dynamically created partial views具有动态创建的局部视图的 KnockoutJS
【发布时间】：2018-01-25 21:43:05
【问题描述】：

我正在与一个问题作斗争，即我使用动态局部视图绑定到淘汰列表。

问题是淘汰列表的视图模型未绑定到正确庄园中新创建的动态视图。

例如。初始人员控制：

搜索用户“mark”，填充ko数组

添加另一个人控制：

搜索用户“piet”，新控件上没有显示任何内容，但初始现在更新人员网格以显示 piets 结果。

我一直在研究组件注册的工作原理，但目前正在努力解决这个问题，并且真的可以使用一些帮助来让它工作。

http://knockoutjs.com/documentation/component-registration.html

下面是代码：

表格：

<div id="peopleDiv">
  @Html.Partial("_reconperson", @Model.ReconPerson)
</div>

<button id="addPerson">Add person</button>

<script id="personSearchTemplate" type="text/html">
    <tr>
        <td><label data-bind="text: EmployeeFirstName"></label></td>
    </tr>
</script>

<script>
    $('#addPerson').on('click', function (evt) {
        evt.preventDefault();
        evt.stopPropagation();

        var div = $('#peopleDiv');
        var url = '@Url.Action("AddNewPerson")';    
        $.get(url, function (data) {
            div.append(data);
        });
    });
</script>

我的控制器上有一个 actionresult，它将返回部分视图。

public ActionResult AddNewPerson()
{
return PartialView("_reconperson", CreateReconPerson());
}

部分观点：

@model ReconPerson

@{
        var personSearchTxt = "personSearch" + @Model.ControlId;
        var personSearchDiv = "personSearch" + @Model.ControlId + "Div";
}

<input type="text" id="@personSearchTxt" />
<table id="@personSearchDiv">
<thead>
  <tr>
   <th>
     <label>First Name</label>
   </th>                
  </tr>
  </thead>
  <tbody data-bind="template: { name: 'personSearchTemplate', foreach: people }"></tbody>
</table>


<script defer="defer">
    $('#@personSearchTxt').keyup(function () {
        updateGrid('@personSearchTxt', true, "", "@personEmpId");
    });
</script>

knockoutjs 绑定信息

var defaultColumns = {    
    EmployeeFirstName: ""
};

var viewModel = {
    people: ko.observableArray([defaultColumns])
};

ko.applyBindings(viewModel);

更新人 observableArray：

function updateGrid(searchBoxName ) {

    viewModel.people.removeAll();
    var fullname = $('#' + searchBoxName).val();

    request = $.ajax({
        url: searchemployeeUrl + fullname,
        failure: function (error) { console.log(error); },
        success: function (data) {
            for (var i = 0; i < data.length; i++) {
                viewModel.people.push(data[i]);
            }
        }
    });

【问题讨论】：

标签： jquery asp.net-mvc knockout.js

【解决方案1】：

你好，原来我很傻。

我只是将所有组件移动到部分视图中，然后将视图模型绑定到 div 元素并进行了排序。

@{ var peopleModel = "peopleModel" + @Model.ControlId;}
 var viewModel = {
            @peopleModel: ko.observableArray([defaultColumns])
        };

        ko.applyBindings(viewModel, document.getElementById("@personGroupDiv"));

【讨论】：