因此，我尝试生成一个包含三个不同标签的网页，每个标签都有不同的内容。 我希望第一个选项卡包含不同的HTML控件，例如单选按钮和下拉菜单。
当尝试将两者放在一起时，会生成HTML控件的GUI，但似乎HTML控件对任何类型的输入都没有响应。
注意：我也在使用带有Flask框架的Python 2.7。
以下是我的标签的.html代码......
<!DOCTYPE html>
<html>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<body>
{% extends "layout.html" %}
{% block content %}
<div id="tab">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<ul class="ui-tab" role="tablist">
<li role="tab">
<a href="#tab1" data-bind="click: showBlock, css: { 'active': selected() == 'tab1' || init() == 1 }">Tab1</a>
</li>
<li role="tab">
<a href="#tab2" data-bind="click: showBlock, css: { 'active': selected() == 'tab2' }">Tab2</a>
</li>
<li role="tab">
<a href="#tab3" data-bind="click: showBlock, css: { 'active': selected() == 'tab3' }">Tab3</a>
</li>
</ul>
<!-- ...................................................................Tab1............................................................................... -->
<div class="ui-tabpanel" role="tabpanel" data-bind="visible: selected() == 'tab1' || init() == 1">
<p>Tab1 Contents<br></p>
</div>
<!-- ...................................................................Tab2............................................................................... -->
<div class="ui-tabpanel" role="tabpanel" data-bind="visible: selected() == 'tab2'">
<p></p>
</div>
<!-- ...................................................................Tab3............................................................................... -->
<div class="ui-tabpanel" role="tabpanel" data-bind="visible: selected() == 'tab3'">
<p></p>
</div>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<script>
var TabViewModel = function(){
var self = this;
//Set href value of element
self.selected = ko.observable(null);
//initial set to show first tabpanel when loading page
self.init = ko.observable(1);
//Get href value og element
self.getHref = function(){
var target;
var element = event.target.hash;
target = element.substr(1);
return target;
};
//Show Tabpanel
self.showBlock = function(){
var target = self.getHref();
self.selected(target);
self.init(2);
};
};
ko.applyBindings(new TabViewModel());
</script>
</div>
{% endblock %}
</body>
</html>
以下是我的表格的代码......
<!DOCTYPE html>
<html>
<body>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
{% extends "layout.html" %}
{% block content %}
<div class='liveExample'>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<div class="readout">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<h3>What's in the model?</h3>
<table>
<tr>
<td class="label">Text value:</td>
<td data-bind="text: stringValue"></td>
</tr>
<tr>
<td class="label">Password:</td>
<td data-bind="text: passwordValue"></td>
</tr>
<tr>
<td class="label">Bool value:</td>
<td data-bind='text: booleanValue() ? "True" : "False"'></td>
</tr>
<tr>
<td class="label">Selected option:</td>
<td data-bind="text: selectedOptionValue"></td>
</tr>
<tr>
<td class="label">Multi-selected options:</td>
<td data-bind="text: multipleSelectedOptionValues"></td>
</tr>
<tr>
<td class="label">Radio button selection:</td>
<td data-bind="text: radioSelectedOptionValue"></td>
</tr>
</table>
<script>
var viewModel = {
stringValue: ko.observable("Hello"),
passwordValue: ko.observable("mypass"),
booleanValue: ko.observable(true),
optionValues: ["Alpha", "Beta", "Gamma"],
selectedOptionValue: ko.observable("Gamma"),
multipleSelectedOptionValues: ko.observable(["Alpha"]),
radioSelectedOptionValue: ko.observable("Beta")
};
ko.applyBindings(viewModel);
</script>
</div>
<h3>HTML controls</h3>
<table>
<tr>
<td class="label">Text value (updates on change):</td>
<td><input data-bind="value: stringValue" /></td>
</tr>
<tr>
<td class="label">Text value (updates on keystroke):</td>
<td><input data-bind='value: stringValue, valueUpdate: "afterkeydown"' /></td>
</tr>
<tr>
<td class="label">Text value (multi-line):</td>
<td><textarea data-bind="value: stringValue"> </textarea></td>
</tr>
<tr>
<td class="label">Password:</td>
<td><input type="password" data-bind="value: passwordValue" /></td>
</tr>
<tr>
<td class="label">Checkbox:</td>
<td><input type="checkbox" data-bind="checked: booleanValue" /></td>
</tr>
<tr>
<td class="label">Drop-down list:</td>
<td><select data-bind="options: optionValues, value: selectedOptionValue"></select></td>
</tr>
<tr>
<td class="label">Multi-select drop-down list:</td>
<td><select multiple="multiple" data-bind="options: optionValues, selectedOptions: multipleSelectedOptionValues"></select></td>
</tr>
<tr>
<td class="label">Radio buttons:</td>
<td>
<label><input type="radio" value="Alpha" data-bind="checked: radioSelectedOptionValue" />Alpha</label>
<label><input type="radio" value="Beta" data-bind="checked: radioSelectedOptionValue" />Beta</label>
<label><input type="radio" value="Gamma" data-bind="checked: radioSelectedOptionValue" />Gamma</label>
</td>
</tr>
</table>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<script>
var viewModel = {
stringValue: ko.observable("Hello"),
passwordValue: ko.observable("mypass"),
booleanValue: ko.observable(true),
optionValues: ["Alpha", "Beta", "Gamma"],
selectedOptionValue: ko.observable("Gamma"),
multipleSelectedOptionValues: ko.observable(["Alpha"]),
radioSelectedOptionValue: ko.observable("Beta")
};
ko.applyBindings(viewModel);
</script>
</div>
{% endblock %}
</body>
</html>
这是我尝试将它们组合在一起的失败......
<!DOCTYPE html>
<html>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<body>
{% extends "layout.html" %}
{% block content %}
<div id="tab">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<ul class="ui-tab" role="tablist">
<li role="tab">
<a href="#tab1" data-bind="click: showBlock, css: { 'active': selected() == 'tab1' || init() == 1 }">Tab1</a>
</li>
<li role="tab">
<a href="#tab2" data-bind="click: showBlock, css: { 'active': selected() == 'tab2' }">Tab2</a>
</li>
<li role="tab">
<a href="#tab3" data-bind="click: showBlock, css: { 'active': selected() == 'tab3' }">Tab3</a>
</li>
</ul>
<!-- ...................................................................Tab1............................................................................... -->
<div class="ui-tabpanel" role="tabpanel" data-bind="visible: selected() == 'tab1' || init() == 1">
<p>Tab1 Contents<br></p>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<div class='liveExample'>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<div class="readout">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<h3>What's in the model?</h3>
<table>
<tr>
<td class="label">Text value:</td>
<td data-bind="text: stringValue"></td>
</tr>
<tr>
<td class="label">Password:</td>
<td data-bind="text: passwordValue"></td>
</tr>
<tr>
<td class="label">Bool value:</td>
<td data-bind='text: booleanValue() ? "True" : "False"'></td>
</tr>
<tr>
<td class="label">Selected option:</td>
<td data-bind="text: selectedOptionValue"></td>
</tr>
<tr>
<td class="label">Multi-selected options:</td>
<td data-bind="text: multipleSelectedOptionValues"></td>
</tr>
<tr>
<td class="label">Radio button selection:</td>
<td data-bind="text: radioSelectedOptionValue"></td>
</tr>
</table>
<script>
var viewModel = {
stringValue: ko.observable("Hello"),
passwordValue: ko.observable("mypass"),
booleanValue: ko.observable(true),
optionValues: ["Alpha", "Beta", "Gamma"],
selectedOptionValue: ko.observable("Gamma"),
multipleSelectedOptionValues: ko.observable(["Alpha"]),
radioSelectedOptionValue: ko.observable("Beta")
};
ko.applyBindings(viewModel);
</script>
</div>
<h3>HTML controls</h3>
<table>
<tr>
<td class="label">Text value (updates on change):</td>
<td><input data-bind="value: stringValue" /></td>
</tr>
<tr>
<td class="label">Text value (updates on keystroke):</td>
<td><input data-bind='value: stringValue, valueUpdate: "afterkeydown"' /></td>
</tr>
<tr>
<td class="label">Text value (multi-line):</td>
<td><textarea data-bind="value: stringValue"> </textarea></td>
</tr>
<tr>
<td class="label">Password:</td>
<td><input type="password" data-bind="value: passwordValue" /></td>
</tr>
<tr>
<td class="label">Checkbox:</td>
<td><input type="checkbox" data-bind="checked: booleanValue" /></td>
</tr>
<tr>
<td class="label">Drop-down list:</td>
<td><select data-bind="options: optionValues, value: selectedOptionValue"></select></td>
</tr>
<tr>
<td class="label">Multi-select drop-down list:</td>
<td><select multiple="multiple" data-bind="options: optionValues, selectedOptions: multipleSelectedOptionValues"></select></td>
</tr>
<tr>
<td class="label">Radio buttons:</td>
<td>
<label><input type="radio" value="Alpha" data-bind="checked: radioSelectedOptionValue" />Alpha</label>
<label><input type="radio" value="Beta" data-bind="checked: radioSelectedOptionValue" />Beta</label>
<label><input type="radio" value="Gamma" data-bind="checked: radioSelectedOptionValue" />Gamma</label>
</td>
</tr>
</table>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<script>
var viewModel = {
stringValue: ko.observable("Hello"),
passwordValue: ko.observable("mypass"),
booleanValue: ko.observable(true),
optionValues: ["Alpha", "Beta", "Gamma"],
selectedOptionValue: ko.observable("Gamma"),
multipleSelectedOptionValues: ko.observable(["Alpha"]),
radioSelectedOptionValue: ko.observable("Beta")
};
ko.applyBindings(viewModel);
</script>
</div>
</div>
<!-- ...................................................................Tab2............................................................................... -->
<div class="ui-tabpanel" role="tabpanel" data-bind="visible: selected() == 'tab2'">
<p></p>
</div>
<!-- ...................................................................Tab3............................................................................... -->
<div class="ui-tabpanel" role="tabpanel" data-bind="visible: selected() == 'tab3'">
<p></p>
</div>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<script>
var TabViewModel = function(){
var self = this;
//Set href value of element
self.selected = ko.observable(null);
//initial set to show first tabpanel when loading page
self.init = ko.observable(1);
//Get href value og element
self.getHref = function(){
var target;
var element = event.target.hash;
target = element.substr(1);
return target;
};
//Show Tabpanel
self.showBlock = function(){
var target = self.getHref();
self.selected(target);
self.init(2);
};
};
ko.applyBindings(new TabViewModel());
</script>
</div>
{% endblock %}
</body>
</html>