淘汰赛组件不同的模板 - gridstack.js答案

【问题标题】：Knockout component different template - gridstack.js淘汰赛组件不同的模板 - gridstack.js
【发布时间】：2015-04-04 10:34:41
【问题描述】：

以下示例来自 gridstack.js 并在此处实现：

http://jsfiddle.net/m3qj3qs1/1/

html:

 <div class="container-fluid">
        <h1>knockout.js Demo</h1>

        <div>
            <button data-bind="click: add_new_widget">Add new widget</button>
        </div>

        <br>

        <div data-bind="component: {name: 'dashboard-grid', params: $data}"></div>
    </div>



    <template id="gridstack-template">
        <div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">
           <div class="grid-stack-item" data-bind="attr: {'data-gs-x': $data.x, 'data-gs-y': $data.y, 'data-gs-width': $data.width, 'data-gs-height': $data.height, 'data-gs-auto-position': $data.auto_position}">
               <div class="grid-stack-item-content"><button data-bind="click: $root.delete_widget">Delete me</button></div>
           </div></div><!-- <---- NO SPACE BETWEEN THESE CLOSING TAGS -->
    </template>

JS：

    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);
    });

在示例中加载了 4 个小部件（数组），定义了一个模板和一个剔除组件。

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

【问题讨论】：

相当混乱，每个模板对应一个模板还是`每个小部件一个模板`？你能添加更多关于你在寻找什么的细节吗？
如果你想每个小部件一个模板，那么你应该稍微改变你的模型，目前模板处于控制器级别，它应该移动到controller.widgets，它应该是一个属性widgets.
在 html 代码中定义了一个模板gridstack_template。现在在 javascript 代码上有一个 widgets[] 数组，其中包含 4 个项目，对吗？现在，knockout 将使用一个模板来渲染所有 4 个小部件。我的问题：如何将不同的模板绑定到不同的小部件？

标签： jquery knockout.js knockout-components

【解决方案1】：

您也可以将组件用于小部件。这是一个示例：

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

当然你的小部件必须包含type:

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'}
];

您需要定义这些小部件。请查看淘汰文档http://knockoutjs.com/documentation/component-overview.html

【讨论】：