如何在不单击项目的情况下显示菜单项的内容
How can I display a menu item's contents without clicking on the item
我想显示第一个菜单项的内容,而不是点击它,使其成为打开应用程序时显示的默认内容。我已经尝试了我能想到的一切。 Console.log 显示“selectedView”可观察值类似于“View {title: “Event List”, templateName: “EventList”}”,所以我尝试将其设置为该值,但它仍然有效.
<div class="inServMenu" data-bind="foreach: views">
<a href="#" class="inServMenuItem" data-bind="text: title, click: $root.selectedView"></a>
</div>
<div data-bind="with: selectedView">
<div data-bind="template: { name: templateName }"></div>
</div>
<script id="EventList" type="text/html">
<span>"Here's the Event List..."</span>
</script>
<script id="RosterList" type="text/html">
<span>"Here's the Roster List..."</span>
</script> var View = function (title, templateName) {
this.title = title;
this.templateName = templateName;
};
// VIEWMODEL
var viewModel = {
selectedView: ko.observable(),
views: ko.observableArray([
new View('Event List', 'EventList'),
new View('Roster List', 'RosterList')
]),
}
ko.applyBindings(viewModel);```
[Here's a jsfiddle][1]
[1]: http://jsfiddle.net/jjfrick/hmfubkcr/18/
您需要稍微更改视图模型构造函数,以便可以引用它:
function ViewModel () {
var vm = this;
vm.views = ko.observableArray([
new View('Event List', 'EventList'),
new View('Roster List', 'RosterList')
]);
vm.selectedView = ko.observable(vm.views()[0])
}
ko.applyBindings(new ViewModel());
我想显示第一个菜单项的内容,而不是点击它,使其成为打开应用程序时显示的默认内容。我已经尝试了我能想到的一切。 Console.log 显示“selectedView”可观察值类似于“View {title: “Event List”, templateName: “EventList”}”,所以我尝试将其设置为该值,但它仍然有效.
<div class="inServMenu" data-bind="foreach: views">
<a href="#" class="inServMenuItem" data-bind="text: title, click: $root.selectedView"></a>
</div>
<div data-bind="with: selectedView">
<div data-bind="template: { name: templateName }"></div>
</div>
<script id="EventList" type="text/html">
<span>"Here's the Event List..."</span>
</script>
<script id="RosterList" type="text/html">
<span>"Here's the Roster List..."</span>
</script> var View = function (title, templateName) {
this.title = title;
this.templateName = templateName;
};
// VIEWMODEL
var viewModel = {
selectedView: ko.observable(),
views: ko.observableArray([
new View('Event List', 'EventList'),
new View('Roster List', 'RosterList')
]),
}
ko.applyBindings(viewModel);```
[Here's a jsfiddle][1]
[1]: http://jsfiddle.net/jjfrick/hmfubkcr/18/
您需要稍微更改视图模型构造函数,以便可以引用它:
function ViewModel () {
var vm = this;
vm.views = ko.observableArray([
new View('Event List', 'EventList'),
new View('Roster List', 'RosterList')
]);
vm.selectedView = ko.observable(vm.views()[0])
}
ko.applyBindings(new ViewModel());