询问后this question并得到答案我有一个模态形式,其内容数据绑定(bind)到 knockout 模型。这很棒,并且使其通用且可重用,只要表单遵循与模板相同的模式,即几个按钮和一个固定的主体。
我想要的是使主体动态化并包含绑定(bind)到我的 View 模型上其他值的输入字段。
所以我有这个:
<script id="myModal" type="text/html">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-bind="click:close" aria-hidden="true">×</button>
<h3 data-bind="html:header"></h3>
</div>
<div class="modal-body">
Name:<input type="text" data-bind="value: paramName" /><br/>
Type:<input type="text" data-bind="value: paramType" /><br />
</div>
<div class="modal-footer">
<a href="#" class="btn" data-bind="click:close,html:closeLabel"></a>
<a href="#" class="btn btn-primary" data-bind="click:action,html:primaryLabel"></a>
</div>
</div>
</div>
</script>
它扩展了表单以包含几个文本输入字段。我可以制作此正文内容,以便它仍然从我的 View 模型填充,但仍然具有数据绑定(bind)。因此,有一个如下所示的 vierw 模型:
modal = {
header: ko.observable("This is a modal"),
body: ko.observable("Name:<input type='text' data-bind='value: paramName' /><br/>Type:<input type='text' data-bind='value: paramType' /><br />"),
paramName: ko.observable(),
paramType: ko.observable(),
closeLabel: "Cancel",
primaryLabel: "Ok",
show: ko.observable(false), /* Set to true to show initially */
onClose: function () {
self.onModalClose();
},
onAction: function () {
if (self.modal.paramName() && self.modal.paramType()) {
self.nextParameter.name(self.modal.paramName());
self.nextParameter.type(self.modal.paramType());
self.addInputParameter();
self.modal.show(false);
}
}
并让模板恢复为通用型,如下所示
<script id="myModal" type="text/html">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-bind="click:close" aria-hidden="true">×</button>
<h3 data-bind="html:header"></h3>
</div>
<div class="modal-body" data-bind"html: body">
</div>
<div class="modal-footer">
<a href="#" class="btn" data-bind="click:close,html:closeLabel"></a>
<a href="#" class="btn btn-primary" data-bind="click:action,html:primaryLabel"></a>
</div>
</div>
</div>
</script>
但仍然对 paramName
的第一个输入进行 knockout 绑定(bind)更改,并对 paramType
的第二个输入进行更改
最佳答案
我将使用动态模板来处理此问题,如注释 5 here 中所述。 。所以它看起来像这样:
modal = {
header: ko.observable("This is a modal"),
//this is now just the name of the template
body: ko.observable('bodyTemplateA'),
// ...
};
然后在你的绑定(bind)中,执行
<div class="modal-body" data-bind="template: { name: body }">
</div>
当然,然后单独定义所有需要的模板:
<script id="bodyTemplateA" type="text/html">
Name:<input type="text" data-bind="value: paramName" /><br/>
Type:<input type="text" data-bind="value: paramType" /><br />
</script>
不完全是您想要的,但我认为这比尝试在整个代码中将所有各种 ko 绑定(bind)的 html 保留在字符串中要容易得多且可维护。
关于javascript - 我可以让 knockout 根据其他绑定(bind)中的值生成绑定(bind)吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22462865/