分配动态模板 [英] Assign Dynamic templates

问题描述

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

I am trying to use KnockoutJS to develop a wizard for my asp.net app.

这是我第一次使用KO.

This is my first attempt at using KO.

我要实现的目标是基于锚标记的Click事件分配动态模板.

What I am trying to achieve is assign dynamic templates based on a Click event of an anchor tag.

我的HTML看起来像这样

My 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>
</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);

问题是，当我从第一步选择参数类型"中单击锚标记时，模板不会根据单击事件目标自动交换.

The issue is that when I click the anchor tag from the first step "Select Param Type", the template is not swapped automatically based on the click event target.

我不确定我在做什么错.

I am not sure what am I doing wrong here.

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

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

推荐答案

我知道这是一个老问题，但是我遇到了以前的回答，觉得需要修复.

I know this is an old question, but I came across my previous answer and felt it needed to be fixed.

代码的主要问题是您使用绑定到click的函数作为模板名称.模板名称应具有单独的可观察值，并且函数应设置其值:

The main problem with your code is that you're using the function you've bound to the click as the template name. You should have a separate observable for the template name, and the function should set its value:

<div class="tab-pane" id="SelectParamType" data-bind="template: currTemplate">

...

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

此外，您的交换机中没有break，因此尽管您已在答案中解决了该问题，但它始终会落入default.

Also, you have no breaks in your switch, so it always falls through to default, though you fixed this in your answer.

第二个问题是，单击链接中的粗体文本会导致event.target成为<b>元素，而不是<a>，因此您没有id.您可以通过bind将模板名称命名为函数调用来避免此问题:

A secondary problem is that clicking on the bold text in the link causes event.target to be the <b> element rather than the <a>, so you have no id. You can avoid this problem by binding the template name to the function call:

data-bind="click: templateToUse.bind($root, 'InputTypeTmpl')"

并在函数中使用data参数，这将变得非常简单:

and using the data parameter in the function, which then becomes very simple:

viewModel.templateToUse = function(data) {
  viewModel.currTemplate(data);
};

实际上，您可以完全取消该功能，并直接绑定到可观察到的模板名称:

In fact, you can do away with the function entirely and bind directly to the template name observable:

data-bind="click: currTemplate.bind($root, 'InputTypeTmpl')"

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

viewModel.secondStep = function(data, event) {

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

viewModel.templateToUse = function(data) {
  viewModel.currTemplate(data);
};

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<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: currTemplate.bind($root, 'InputTypeTmpl')" 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: currTemplate.bind($root, 'ListTypeTmpl')" 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: currTemplate">
</div>

这篇关于分配动态模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！