【发布时间】:2020-10-22 10:34:40
【问题描述】:
我有一些 javascript 代码可以打开一个模态并将绑定应用到我的淘汰视图模型。 当模式打开时,会出现第二个选项卡,单击时,它会触发一个 ajax 调用并设置一个带有返回数据的 observableArray(人,有时是一个空数组)。 下面的 html 代码遍历数组,并显示人员的姓名。
这在我第一次单击打开模式时工作正常,但对任何其他单击都不起作用,在控制台中显示错误 Anonymous template defined, but no template content was provided。
我在这上面花了 2 天时间,看不出问题出在哪里,尽管我怀疑它可能在我的绑定方法中。
我无法在笔中重新创建错误,因为它使用 Ajax 调用,我不知道如何模仿。
HTML:
...<other html, modal, tabs etc...>
<div id="people" class="tab-pane">
<form class="well form-horizontal" id="peopleForm">
<fieldset>
<legend>Registered</legend>
<div class="form-group" data-bind="visible: people().length > 0">
<div data-bind="foreach: people">
<div class="form-group">
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="joinEventModalButtons" data-bind="value: $data.FullName" disabled />
</div>
</div>
<div class="col-md-4 inputGroupContainer">
<input type="button" value="Remove" class="btn btn-danger" />
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
JS:
var myModel = function myViewModel() {
self.people = ko.observableArray([{ "FullName": "Joe", "Email": "Joe@gmail.com" }]);
// setTimeout to try mimic ajax call?
setTimeout(function() {
self.people([])
}, 6000)
....
// ajax call within 'myModel' but also doesn't work if I put it in the section where I show the modal
$.ajax({
url: "/api/people",
type: "GET",
success: function (data) {
self.people(data);
},
error: function (err) {
alert(err.responseJSON.message);
}
});
}
JS 用于显示 Modal,应用绑定等...:
.. 在某些按钮上单击...:
$('#myPeopleModal').on('hidden.bs.modal', function () {
// do something....
});
ko.cleanNode(document.getElementById('myPeopleModal'));
var myM = new myModel();
ko.applyBindings(myM, document.getElementById('myPeopleModal'));
$('#myPeopleModal').removeClass("hide").modal('show');
- 如果我用
foreach: people评论该部分,模式将毫无问题地打开和关闭。 - 如果我删除 ajax 调用并只保留 observable 集一次,模式打开和关闭不会出现问题。
- 我还在模型中设置了其他 observables,它们运行良好(为了简化而删除了它们)
- 我也尝试了 ko 注释语法,但得到了完全相同的结果
淘汰赛 3.5.1。
感谢您的帮助。
【问题讨论】:
标签: data-binding foreach knockout.js