html - 如何使用 knockout.js 在 gridstack 小部件中添加具有 id 的 div 元素？

Question

我用过http://troolee.github.io/gridstack.js/demo/knockout.html。现在，我想在这些小部件中添加我自己的带有 id 的 div 元素。添加到不同小部件的 div 元素会根据某些条件而有所不同。如何使用 knockout.js 做到这一点？

Answer 1

好的，对这个插件并不熟悉。但是我从 codepen 开始。也许这可以帮助您入门。http://codepen.io/anon/pen/wJqdBW?editors=0110

因此，如果您在发送的原始链接上点击查看源，小部件就是这样的。

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

但是您想在小部件内添加一个小部件。所以我做了一个功能部件。里面有另一个添加小部件

function widget(x,y,width,height){
          var self = this;
          this.x = ko.observable(x);
          this.y = ko.observable(y);
          this.width = ko.observable(width);
          this.height = ko.observable(height);
          this.innerwidgets = ko.observableArray()
             this.addNewWidget = function () {
                  var mywidget = new widget(
                    0,
                    0,
                    Math.floor(1 + 3 * Math.random()),
                    Math.floor(1 + 3 * Math.random())                    
                  )
                  self.innerwidgets.push(mywidget);
                };
        }

所以现在小部件变成了

var widgets = [];
            widgets.push(new widget(0,0,2,2));

所以现在您的模板更改为放置添加按钮，并为您的内部小部件添加另一个 foreach 循环。

'<button data-bind="click: addNewWidget">Add inner Div</button>',
                     '<div class="grid-stack" data-bind="foreach: innerwidgets">',
                            '<p>New Element</p>',
                         '</div>',