使用knockout和jquery的可折叠菜单

Question

我正在尝试使用knockout和jquery构建一个简单的可折叠菜单。但由于某种原因，jquery没有被激活。

脚本位于jsfiddle

    <ul id="usernav" data-bind="template: { name: 'seasonTemplate', foreach: seasons, as: 'season' }"></ul>

<script type="text/html" id="seasonTemplate">
    <li>
        <strong data-bind="text: name"></strong>
        <ul data-bind="template: { name: 'monthTemplate', foreach: months, as: 'month' }"></ul>
    </li>
</script>

<script type="text/html" id="monthTemplate">
    <li>
        <span data-bind="text: month"></span>
        is in
        <span data-bind="text: season.name"></span>
    </li>
</script>

脚本是

        var viewModel = {
        seasons: ko.observableArray([
            { name: 'Spring', 
             months:[ 'March' , 'April', 'May'  ]},
            { name: 'Summer', months: [ 'June', 'July', 'August' ] },
            { name: 'Autumn', months: [ 'September', 'October', 'November' ] },
            { name: 'Winter', months: [ 'December', 'January', 'February' ] }
        ])
    };
    ko.applyBindings(viewModel);

$('#usernav').find('ul').hide();

$('li').click(function(e) {
    $(this).children('ul').toggle();
    e.stopPropagation();
});

修改： -  所以是的，我可能忘记在复制粘贴时将jquery库包含在原始jsfiddle文章中，但这不是我的问题。我创建了一个关于我的问题here的单独问题 谢谢！

Answer 1

对于仍然面临这个问题的人来说，使用jquery mobile和knockoutjs来获得ui是正确的，你必须在重新分配observablearray之后强制刷新。

$('.selector').collapsibleset('refresh');

Answer 2

首先帮助我们帮助您更新您的jsFiddle。

如果这不是你的答案，我会自己删除它，但是，修复jquery库使你的代码工作，所以这可能是一个答案（原文如此）。

在jsFiddle上，更新你的javascript库和ADD jquery。

Your resulting jsFiddle