淘汰賽成分不同的模板 - gridstack.js

繼和示例從gridstack.js並在這裏實現：淘汰賽成分不同的模板 - gridstack.js

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個加載的組件（數組）和一個定義的模板以及一個淘汰組件。

如何爲不同的小工具指定不同的模板？每個部件一個模板的示例？

來源

2015-04-04 David Dury

很混亂，每個模板或每個模板的每個模板一個模板？你能添加更多關於你在找什麼的細節嗎？ – 2015-04-04 10:40:36

如果你想爲每個部件使用一個模板，那麼你應該稍微改變你的模型，目前模板在控制器級別，它應該被移動到'controller.widgets'，它應該是'widgets'的一個屬性。 – 2015-04-04 10:43:22

在html代碼中有一個定義了'gridstack_template'的模板。現在在JavaScript代碼中有一個包含4個項目的widgets []數組，對吧？現在淘汰賽將使用該單一模板渲染所有4個小部件。我的問題：我如何將不同的模板綁定到不同的小部件？ – 2015-04-04 10:44:45

您也可以使用小部件的組件。下面是一個示例是如何可能看起來像：

<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

來源

2015-04-30 07:06:15

淘汰賽成分不同的模板 - gridstack.js

回答

相關問題