使用ForEach将数据绑定到表

时间:2015-07-20 10:12:55

标签: javascript jquery knockout.js

我刚刚开始使用Knockout,所以请不要介意我的无知。

我正在尝试使用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);

感谢您的帮助!

1 个答案:

答案 0 :(得分:2)

您的模板的viewmodel应作为第三个参数传递给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/