knockout.js를 사용하여 gridstack 위젯에 id가있는 div 요소를 추가하는 방법은 무엇입니까?

Question

http://troolee.github.io/gridstack.js/demo/knockout.html을 사용했습니다. 자,이 위젯에 id가있는 div 요소를 추가하고 싶습니다. 다른 위젯에 추가 된 div 요소는 일부 조건에 따라 달라집니다. knockout.js를 사용하여이를 수행하는 방법?

Answer 1

ok이 항목에 익숙하지 않은 ok. 그러나 여기 나는 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>',