使用ForEach将数据绑定到表

Question

I am just starting to use Knockout so please dont mind my ignorance.

I am trying to use knockout to build a SPA which basically swaps templates and does some data binding to show a list of array (there are many more functions but I will be sticking to the scope of the question here)

When I do a data-bind using a ViewModel property, I get an error saying that property is not defined when I click on the first link "Input Type", which should populate the table with the ParamData. In my case I am facing the below error

"ParamData is not defined"

I have created a JsFiddle: http://jsfiddle.net/sourabhtewari/c8tm1193/3/

The HTML looks like this:

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

And the 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);

Appreciate your help!

Answer 1

Your viewmodel for the template should be passed as the third argument to applyBindingsToNode . Also, since your anchor has sub-parts, the target of the click event might not be what you expect. Better to pass the desired template name explicitly.

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)
    });
};

Fiddle: http://jsfiddle.net/c8tm1193/5/