使用ForEach將數據綁定到表

我剛開始使用Knockout，所以請不要介意我的無知。使用ForEach將數據綁定到表

我想用knockout來建立一個基本上交換模板的SPA，並做一些數據綁定來顯示數組列表（還有更多的功能，但我會堅持這裏的問題的範圍）

當我使用ViewModel屬性進行數據綁定時，出現一個錯誤，指出當我單擊第一個「輸入類型」鏈接時該屬性未定義，該輸入類型應該使用ParamData填充表格。在我來說，我對着下面的錯誤

「沒有定義ParamData」

我創建了一個的jsfiddle：http://jsfiddle.net/sourabhtewari/c8tm1193/3/

的HTML看起來像這樣：

<script id="ParamHomeTmpl" type="text/html"> 
    <section class="alert alert-info"> 
     <div class="panel-heading h3 blackincolor"><i class="fa fa-exclamation-circle redincolor" style="margin-right: 5px"></i>Please Select Parameter Type</div> 

     <ul class="blackincolor list-group"> 
      <li><a class="list-group-item list-group-item-info" data-bind="click: templateToUse" href="#" id="InputType"><b>Input Type:</b> Gives an Option to Select your Key-Value Pairs.</a></li> 

      <li><a class="list-group-item list-group-item-success" data-bind="click: templateToUse" href="#" id="ListType"><b>List Type:</b> You can type in a Key and insert a list of values and select one of the values that you created.</a></li> 
     </ul> 
    </section> 
</script> 
<script id="InputTypeTmpl" type="text/html"> 
    <div> 
     <p>Input Type</p> 
    </div> 
    <table id="paramtypeTbl" data-bind="template:{ name: 'paramDataTmpl'}"> 
    </table> 
</script> 
<script id="ListTypeTmpl" type="text/html"> 
    <div> 
     <p>ListType</p> 
    </div> 
</script> 
<script id="paramDataTmpl" type="text/html"> 
    <div data-bind="foreach: ParamData"> 

     <span></span><span>Products</span> 
     <table> 
      <thead> 
       <tr> 
        <th>Key</th> 
        <th>Value</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td data-bind="text: paramKey"></td> 
        <td data-bind="text: paramValue"></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</script> 
<script id="BlankTmpl" type="text/html"></script> 
<div class="tab-pane" id="SelectParamType" data-bind="template: { name: 'ParamHomeTmpl' }"></div> 
<div class="tab-pane" id="Attributes" data-bind="template: { name: templateToUse }"></div>

和Javascript：

var templateType = "BlankTmpl"; 

var Tempdata = ([{ 
    paramKey: "Sourabh", 
    paramValue: "Tewari" 
}]); 

var viewModel = { 
    ParamData: ko.observableArray(Tempdata) 
}; 

viewModel.templateToUse = function (data, event) { 
    try { 

     switch (event.target.id) { 

      case "InputType": 
       templateType = "InputTypeTmpl"; 
       break; 

      case "ListType": 
       templateType = "ListTypeTmpl"; 
       break; 

      case "FileType": 
       templateType = "FileTypeTmpl"; 
       break; 

      case "DataBaseType": 
       templateType = "DataBaseTypeTmpl"; 
       break; 

      default: 
       return "BlankTmpl"; 

     } 
    } catch (err) { 
     return "BlankTmpl"; 
    } 
    ko.applyBindingsToNode(document.getElementById("Attributes"), { 
     template: { 
      name: templateType 
     } 
    }); 

}; 

viewModel.ParamView = function (data, event) { 
    ko.applyBindingsToNode(document.getElementById("paramtypeTbl"), { 
     ParamData: ko.observableArray(Tempdata), 
     template: { 
      name: ParamView 
     } 
    }); 
}; 
ko.applyBindings(viewModel);

感謝您的幫助！

來源

2015-07-20 Navyseal

這是相同的查詢，你問y'day？ http://stackoverflow.com/questions/31499059/assign-dynamic-templates ...我希望給你一些指點，但還沒有設法找到時間，但同時你不應該有同樣的問題兩次。理想情況下，你應該關閉這一個，並繼續改進你的原始。 – sifriday

不，不是這個問題。我想出了最後一個問題的答案。我正在起草這個答案，並會立即發佈。在這一個中，我遇到了綁定ParamData並將其顯示在表中的問題。 – Navyseal

......還是我錯了 - 這是關於相同代碼的不同問題 - 你現在是否已經解決了你的原始問題並轉向了一個新問題？如果是這樣，那麼你應該自己回答你的原始問題，所以人們（像我一樣）知道你不再需要幫助。 – sifriday

您的模板視圖模型應作爲第三個參數傳遞給applyBindingsToNode。另外，由於您的定位點具有子部分，因此點擊事件的目標可能不符合您的預期。最好明確地傳遞所需的模板名稱。

HTML：

<li><a class="list-group-item list-group-item-info" data-bind="click: templateToUse.bind(0,'InputTypeTmpl')" href="#" id="InputType"><b>Input Type:</b> Gives an Option to Select your Key-Value Pairs.</a></li>

JS：

viewModel.templateToUse = function (name) { 
    if (typeof name === 'string') templateType = name; 
    ko.applyBindingsToNode(document.getElementById("Attributes"), { 
     template: { 
      name: templateType 
     } 
    }, { 
     ParamData: ko.observableArray(Tempdata) 
    }); 
};

小提琴：http://jsfiddle.net/c8tm1193/5/

來源

2015-07-20 14:54:28

非常感謝！ – Navyseal

使用ForEach將數據綁定到表

回答

相關問題