在 knockoutjs 中嵌套组件

Question

我有一个用于封装引导模式的淘汰组件。除非我尝试将任何内容插入模态框的主体，否则它的效果很好。我的第一种方法是将 html 放入模态对话框的 params.Content 中，但我有一个难以转义嵌套引号的类型。我想做的只是嵌套下面的组件，并让<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">&times;</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;
    }
});

Answer 1

在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">&times;</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>