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