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>',

如何使用knockout.js在gridstack小部件中添加id为div元素？

1 个答案: