我正在努力解决一个问题,即我正在使用一个动态局部视图绑定到一个淘汰列表。
问题是,淘汰列表的viewmodel没有绑定到正确庄园中新创建的动态视图。
例如,。 初始人控制:
搜索用户“mark”,填充ko数组
添加另一个人控件:
搜索用户“piet”,新控件上没有任何显示但是初始 person grid现在更新以显示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>
我的控制器上有一个动作结果,它将返回一个部分视图。
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]);
}
}
});
答案 0 :(得分:0)
嗨,事实证明我是愚蠢的。
我只是将所有组件移动到局部视图中,然后将视图模型绑定到div元素并进行繁荣排序。
@{ var peopleModel = "peopleModel" + @Model.ControlId;}
var viewModel = {
@peopleModel: ko.observableArray([defaultColumns])
};
ko.applyBindings(viewModel, document.getElementById("@personGroupDiv"));