在Knockout.js中嵌套組件

Question

我有一個淘汰賽組件，我正在用來封裝引導程序模態。 除了當我嘗試將任何內容插入到模式主體中時，它的效果都很好。 我的第一種方法是將html放入params.modal -dialog的內容中，但是我很難將嵌套的引號轉義。 我想做的就是像下面那樣嵌套組件，並使<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>

modal-dialog.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>