Jquery 淘汰组件不同的模板-gridstack.js

以下是gridstack.js中的示例，并在此处实现：

html:

在这个示例中，加载了4个小部件（数组），定义了一个模板和一个淘汰组件

---

如何为不同的小部件指定不同的模板？每个小部件的示例一个模板？

您也可以将组件用于小部件。下面是一个示例，它可能看起来像：

<div class="grid-stack-item-content"><div data-bind="component: {name: type, params: $data}"></div></div>

---

您需要定义这些小部件。请看一下淘汰文档

相当混乱，每个模板对应每个模板还是“每个小部件对应一个模板”？你能添加更多关于你想要什么的详细信息吗？如果你想为每个小部件添加一个模板，那么你应该稍微更改一下你的模型，目前模板处于控制器级别，应该将其移动到

controller.widgets

，它应该是

widgets

的属性。在html代码上定义了一个模板

gridstack\u template

。现在在javascript代码中有一个widgets[]数组，它包含4项，对吗？现在，knockout将使用一个模板来呈现所有4个小部件。我的问题：如何将不同的模板绑定到不同的小部件？

    ko.components.register('dashboard-grid', {
        viewModel: {
            createViewModel: function (controller, componentInfo) {
                var ViewModel = function (controller, componentInfo) {
                    var grid = null;

                    this.widgets = controller.widgets;

                    this.afterAddWidget = function (items) {
                        if (grid == null) {
                            grid = $(componentInfo.element).find('.grid-stack').gridstack({
                                auto: false
                            }).data('gridstack');
                        }

                        var item = _.find(items, function (i) { return i.nodeType == 1 });
                        grid.add_widget(item);
                        ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
                            grid.remove_widget(item);
                        });
                    };
                };

                return new ViewModel(controller, componentInfo);
            }
        },
        template: { element: 'gridstack-template' }
    });

    $(function () {
        var Controller = function (widgets) {
            var self = this;

            this.widgets = ko.observableArray(widgets);

            this.add_new_widget = function () {
                this.widgets.push({
                    x: 0,
                    y: 0,
                    width: Math.floor(1 + 3 * Math.random()),
                    height: Math.floor(1 + 3 * Math.random()),
                    auto_position: true
                });
            };

            this.delete_widget = function (item) {
                self.widgets.remove(item);
            };
        };

        var widgets = [
            {x: 0, y: 0, width: 2, height: 2},
            {x: 2, y: 0, width: 4, height: 2},
            {x: 6, y: 0, width: 2, height: 4},
            {x: 1, y: 2, width: 4, height: 2}
        ];

        var controller = new Controller(widgets);
        ko.applyBindings(controller);
    });

<div class="grid-stack-item-content"><div data-bind="component: {name: type, params: $data}"></div></div>

var widgets = [
    {x: 0, y: 0, width: 2, height: 2, type: 'widgetA'},
    {x: 2, y: 0, width: 4, height: 2, type: 'widgetB'},
    {x: 6, y: 0, width: 2, height: 4, type: 'widgetC'},
    {x: 1, y: 2, width: 4, height: 2, type: 'widgetD'}
];