javascript - 分配动态模板

Question

我正在尝试使用 KnockoutJS 为我的 asp.net 应用程序开发向导。

这是我第一次尝试使用 KO。

我想要实现的是根据 anchor 标记的点击事件分配动态模板。

我的 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>
</script>
<script id="ListTypeTmpl" type="text/html">
   <div>
       <p>ListType</p>
   </div>
</script>
<script id="BlankTmpl" type="text/html">
   <div>
       <p>Blank</p>
   </div>
</script>
<div class="tab-pane" id="SelectParamType" data-bind="template: { name: templateToUse }">
</div>

最后实际的 JS 是:

var viewModel = {
       currTemplate: function () {
        return "paramHome";
    },
    paramType: ko.observable("Metadata")
};

viewModel.secondStep = function (data, event) {

    // return (event.target.id);
    console.log(data);
};

viewModel.templateToUse = function (data, event) {
    try {
        alert(event.target.id);
        switch (event.target.id) {
            case "InputType":
                return "InputTypeTmpl";

            case "ListType":
                return "ListTypeTmpl";

            default:
                return "BlankTmpl";
        }
    }
    catch (err) { return "ParamHomeTmpl" ;}
};

ko.applyBindings(viewModel);

问题是，当我单击第一步“选择参数类型”中的 anchor 标记时，模板不会根据点击事件目标自动交换。

我不确定我在这里做错了什么。

Jsfiddle:http://jsfiddle.net/sourabhtewari/c8tm1193/

Answer 1

我认为你的方法——使用模板——是错误的。动态 HTML 是 if 绑定(bind)的用途。模板 (imo) 的唯一合法用途是递归 HTML 结构。

更新我不再订阅此 View 。当一段代码可能采用多种形式时，模板对于递归 HTML 非常有用。绑定(bind)到变量并使用正确的模板名称更新变量。原始答案继续如下。

我已将点击绑定(bind)设置为一个可观察对象，用于控制显示哪个部分。

var viewModel = {
  section: ko.observable('blank'),
  paramType: ko.observable("Metadata")
};

viewModel.secondStep = function(data, event) {

  // return (event.target.id);
  console.log(data);
};

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<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: section.bind(0, 'input')" 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: section.bind(0, 'list')" 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>
<div data-bind="if:section()=='input'">
  <p>Input Type</p>
</div>
<div data-bind="if:section()=='list'">
  <p>ListType</p>
</div>
<div data-bind="if:section()=='blank'">
  <p>Blank</p>
</div>