分配动态模板 [英] 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 break
s 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 bind
ing 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屋!