Question

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

我正在尝试使用knockout构建一个SPA，它基本上交换模板并进行一些数据绑定以显示数组列表（还有更多的函数，但我会坚持这里的问题范围）

当我使用ViewModel属性进行数据绑定时，当我点击第一个链接＆＃34;输入类型＆＃34;时，我得到一个错误，说明该属性未定义，它应该使用ParamData填充表格。在我的情况下，我面临以下错误

＆＃34; ParamData未定义＆＃34;

我创建了一个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);

感谢您的帮助！

Answer 1

您的模板的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/

使用ForEach将数据绑定到表

1 个答案: