在 knockoutjs 中嵌套组件
Nesting components in knockoutjs
我有一个淘汰组件,我用它来封装引导模式。它工作得很好,除非我尝试将任何内容插入模态的正文中。我的第一个方法是将html放入参数中。模态对话框的内容,但我有一个困难的类型来转义嵌套引号。我想做的只是嵌套下面这样的组件,并让<test>
元素出现在模态主体中。
挖空视图页面的模型
function recordManagement() {
var recordManagementVM = function () {
self.SearchExisting = function() {
console.log(response);
}
}; //--End VM --
ko.applyBindings(new recordManagementVM(), document.getElementById("recordmanagement"));
"记录管理"页
<div id="recordManagement">
<modal-dialog params="
{ModalId: 'searchExisting',
Title: 'Search Existing',
CancelText: 'Cancel',
SaveEvent: SearchExisting,
SaveText: 'Save',
Content: ''}">
<test></test>
</modal-dialog>
</div>
模态对话框.js
ko.components.register('modal-dialog', {
template: '<div data-bind="attr: {id: ModalId}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"> '
<div class="modal-dialog"> '
<div class="modal-content"> '
<div class="modal-header"> '
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button> '
<h3 class="modal-title" data-bind="html: Title"></h3> '
</div> '
<div class="modal-body" data-bind="html: Content"> '
</div> '
<div class="modal-footer"> '
<button type="button" class="btn btn-default" data-dismiss="modal" data-bind="text: CancelText">Cancel</button> '
<button type="button" class="btn btn-primary" data-bind="text: SaveText, click: SaveEvent">Save</button> '
</div> '
</div> '
</div> '
</div>',
viewModel: function (params) {
console.log(params);
var self = this;
self.Title = ko.observable(params.Title);
self.Content = ko.observable(params.Content);
self.ModalId = ko.observable(params.ModalId);
self.CancelText = ko.observable(params.CancelText);
self.SaveText = ko.observable(params.SaveText);
self.SaveEvent = params.SaveEvent;
}
});
在 Knockout 3.3 中,他们添加了将子节点传递到组件中并通过$componentTemplateNode
引用它们的功能
使用挖空 3.4 的示例:
ko.components.register('modal-dialog', {
template: '<div data-bind="attr: {id: ModalId}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"> '
<div class="modal-dialog"> '
<div class="modal-content"> '
<div class="modal-header"> '
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button> '
<h3 class="modal-title" data-bind="html: Title"></h3> '
</div> '
<div class="modal-body" data-bind="template:{nodes:$componentTemplateNodes}"> '
</div> '
<div class="modal-footer"> '
<button type="button" class="btn btn-default" data-dismiss="modal" data-bind="text: CancelText">Cancel</button> '
<button type="button" class="btn btn-primary" data-bind="text: SaveText, click: SaveEvent">Save</button> '
</div> '
</div> '
</div> '
</div>',
viewModel: function(params) {
console.log(params);
var self = this;
self.Title = ko.observable(params.Title);
self.Content = ko.observable(params.Content);
self.ModalId = ko.observable(params.ModalId);
self.CancelText = ko.observable(params.CancelText);
self.SaveText = ko.observable(params.SaveText);
self.SaveEvent = params.SaveEvent;
}
});
var recordManagementVM = function() {
self.SearchExisting = function() {
console.log(response);
}
}; //--End VM --
ko.applyBindings(new recordManagementVM(), document.getElementById("recordmanagement"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<div id="recordManagement">
<modal-dialog params="
{ModalId: 'searchExisting',
Title: 'Search Existing',
CancelText: 'Cancel',
SaveEvent: SearchExisting,
SaveText: 'Save',
Content: ''}">
<div>Testing Child Nodes</div>
</modal-dialog>
</div>
相关文章:
- 在嵌套组件中使用 react 组件时模块中断
- 在 React 中嵌套组件,props 不会传递给子组件
- 如何使用嵌套的 React 组件从“链接页面”的顶部开始
- ReactJs - 列表组件中的嵌套列表组件
- 嵌套的React/Rerelay组件未接收道具
- DefaultRouter组件中的嵌套路由
- 反应:在嵌套组件上冒泡点击事件
- 如何访问Vue.js中深度嵌套的子组件中的数据
- 根据location.hash传递的数据重新呈现ReactJS嵌套的子组件
- 如何使用React和Redux在嵌套容器中测试组件
- Angular 1.5 嵌套组件绑定父值
- 在 knockoutjs 中嵌套组件
- 您如何处理 Angular2 中嵌套组件的依赖关系
- 获取嵌套在聚合物纸张对话框中的自定义Web组件内内容的客户端高度
- 在嵌套的边框容器内容窗格小组件中未检测到区域属性
- 如何处理 React 嵌套组件循环依赖?(使用 es6 类)
- AngularJS通过嵌套组件向上传播更改
- Aura.js闪电组件:从超级/父组件触发嵌套/子组件的方法
- 如何在 RivetsJS 中处理递归嵌套组件
- 了解嵌套组件绑定在 KnockoutJS 上的工作原理