敲除綁定窗口小部件數組到特定模板名稱

-1

我試圖用淘汰賽將小部件數組綁定到自定義模板。敲除綁定窗口小部件數組到特定模板名稱

基本上每個小部件都定義了templateToUse。

然而，當我嘗試每個小部件模板，並調用getTemplate功能結合我得到undefined錯誤。

我還設置了一個叫做afterRender的函數，它引發這個錯誤：Error: Unable to get property 'nodeType' of undefined or null reference。

我做錯了什麼？

HTML：

<div class="row" data-bind="template: { name: getTemplate, foreach: { data: widgets, afterRender: $root.afterAddWidget }}"> 

</div> 

<script type="text/html" id="panel-template"> 
    <div class="panel panel-color" data-bind="css: $data.panelType" id="demo-panel-network"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Green colored panel</h3> 
      <div class="panel-control"> 
       <button class="btn" id="demo-panel-network-refresh" data-toggle="panel-overlay" data-target="#demo-panel-network"><i class="fa fa-refresh"></i></button> 
       <div class="btn-group"> 
        <button class="btn btn-default" data-toggle="dropdown"><i class="fa fa-gear"></i></button> 
        <ul class="dropdown-menu dropdown-menu-right"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider"></li> 
         <li><a href="#">Separated link</a></li> 
        </ul> 
       </div> 
       <button class="btn btn-default" data-toggle="panel"><i class="fa fa-chevron-down"></i></button> 
       <button class="btn btn-default" data-bind="click: $root.delete_widget"><i class="fa fa-times"></i></button> 
      </div> 

     </div> 
     <div class="panel-body"> 
      <p>fdgd</p>    
     </div> 
    </div> 

</script>

JS：

$(function() { 
     var ViewModel = function (widgets) { 

      this.widgets = ko.observableArray(widgets); 


      this.delete_widget = function (item) { 

       self.widgets.remove(item); 

      }; 

      this.getTemplate = function (item) { 
       alert(item.templateToUse); 
       return item.templateToUse; 
      } 


      this.afterAddWidget = function (items) { 

       alert('after'); 


      }; 
     }; 

     var widgets = [ 
      { x: 0, y: 0, width: 6, height: 6, noResize: 'yes', noMove: 'no', autoposition: 'no', isLocked: 'no', panelType: 'panel-success', templateToUse: 'panel-template' }, 
      { x: 8, y: 0, width: 4, height: 2, noResize: 'yes', noMove: 'no', autoposition: 'no', isLocked: 'no', panelType: 'panel-warning', templateToUse: 'panel-template' }, 
      { x: 0, y: 8, width: 4, height: 2, noResize: 'yes', noMove: 'no', autoposition: 'no', isLocked: 'no', panelType: 'panel-info', templateToUse: 'panel-template' }, 
      { x: 4, y: 8, width: 4, height: 2, noResize: 'yes', noMove: 'no', autoposition: 'no', isLocked: 'no', panelType: 'panel-danger', templateToUse: 'panel-template' }, 
      { x: 8, y: 8, width: 4, height: 2, noResize: 'yes', noMove: 'no', autoposition: 'no', isLocked: 'no', panelType: 'panel-purple', templateToUse: 'panel-template' }, 

     ]; 

     var viewModel = new ViewModel(widgets); 

     ko.applyBindings(viewModel); 
    });

來源

2015-04-04 David Dury

[在foreach循環中綁定不同的Knockout JS模板]的可能重複（http://stackoverflow.com/questions/12687048/bind-different-knockout-js-templates-inside-foreach-loop） – CrimsonChris 2015-04-05 00:51:09

你foreach是錯誤的。你想綁定小部件的模板foreach。

<div class="row" data-bind="template: { name: getTemplate, 
             foreach: widgets, 
             afterRender: $root.afterAddWidget }"></div>

您設置的方式，您告訴淘汰賽將您的映射呈現爲模板的項目。

來源

2015-04-05 03:19:36

敲除綁定窗口小部件數組到特定模板名稱

回答

相關問題