1

我希望从http://www.bootstrapcdn.com/#bootswatch_tab应用引导主题。

所以我有 View Model : Shell 和 VIew ，如下所示，我正在使用 Ko.Observable 数组加载所有需要在 Bootstrap Drop-down 中显示的主题名称，但 Drop-down 没有填充可观察值

请帮我解决。提前致谢

外壳.js

define(['durandal/system', 'plugins/router', 'services/logger'],
    function (system, router, logger , config) {


var themes =  ko.observableArray([
                 { key: "amelia", text: "Amelia" },
                { key: "cerulean", text: "Cerulean" },
                { key: "cosmo", text: "Cosmo" },
                { key: "cyborg", text: "Cyborg" },
                { key: "flatly", text: "Flatly" },
                { key: "journal", text: "Journal" },
                { key: "readable", text: "Readable" },
                { key: "simplex", text: "Simplex" },
                { key: "slate", text: "Slate" },
                { key: "spacelab", text: "Spacelab" },
                { key: "united", text: "United" }
    ]);
        var shell = {
            activate: activate,
            router: router,
            themes: themes
        };

        return shell;

        //#region Internal Methods
        function activate() {
         return boot();
        }


        function boot() {
            log(config.appTitle + 'Loaded!', null, true);

            router.on('router:route:not-found', function (fragment) {
                logError('No Route Found', fragment, true);
            });

            var routes = [
                { route: '', moduleId: 'home', title: 'Home', nav: 1 },
                { route: 'details', moduleId: 'details', title: 'Details', nav: 2 }];

            return router.makeRelative({ moduleId: 'viewmodels' }) // router will look here for viewmodels by convention
                .map(routes)            // Map the routes
                .buildNavigationModel() // Finds all nav routes and readies them
                .activate();            // Activate the router
        }

        function log(msg, data, showToast) {
            logger.log(msg, data, system.getModuleId(shell), showToast);
        }

        function logError(msg, data, showToast) {
            logger.logError(msg, data, system.getModuleId(shell), showToast);
        }
        //#endregion
    });

查看 Shell.html

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="brand" href="/">
                <span class="title">Hot Towel SPA</span>
            </a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav" data-bind="foreach: router.navigationModel">
                <li data-bind="css: { active: isActive }">
                    <a data-bind="attr: { href: hash }, text: title"></a>
                </li>
            </ul>
<!-- Load Themes -->
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Themes <b class="caret"></b></a>
                    <ul class="dropdown-menu" id="themes" data-bind="foreach: themes">
                        <li>
                            <a data-bind="attr: { href: hash }, text: text"></a>
                        </li>
                    </ul>
                </li>
            </ul>
            <div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
                <div class="progress progress-striped active page-progress-bar">
                    <div class="progress-bar" style="width: 100px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
4

2 回答 2

1

它应该作为错误记录在您的控制台中。

<a data-bind="attr: { href: hash }, text: text"></a>

哈希未定义。你要：

<a data-bind="attr: { href: '#/' + key }, text: text"></a>
于 2013-10-03T17:28:27.873 回答
1

我认为问题不在于绑定，而是在 CSS 中，我更新了一些 CSS 类（尤其是第 13 和 4 行中的 nav-collapse ），现在出现下拉列表

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="nav-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="brand" href="/">
                <span class="title">Hot Towel SPA</span>
            </a>
        </div>
        <div class="collapse nav-collapse">
            <ul class="nav navbar" data-bind="foreach: router.navigationModel">
                <li data-bind="css: { active: isActive }">
                    <a data-bind="attr: { href: hash }, text: title"></a>
                </li>
            </ul>
<!-- Load Themes -->
            <ul class="nav navbar">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Themes <b class="caret"></b></a>
                    <ul class="dropdown-menu" id="themes" data-bind="foreach: themes">
                        <li>
                            <a data-bind="attr: { href: key }, text: text"></a>
                        </li>
                    </ul>
                </li>
            </ul>
            <div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
                <div class="progress progress-striped active page-progress-bar">
                    <div class="progress-bar" style="width: 100px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

顺便说一句，当您单击下拉菜单中的项目时，您仍然遇到问题，我刚刚将它映射到键，因为hash@Matthew James Davis 没有提到

于 2013-10-04T08:53:48.960 回答