1

http://www.bootstrapcdn.com/#bootswatch_tabからブートストラップ テーマを適用しようとしています。

したがって、View Model : Shell と VIew を以下のように持っています。Bootstrap ドロップダウンに表示する必要があるすべてのテーマ名をロードするために Ko.Observable 配列を使用していますが、ドロップダウンには観察可能な値が入力されていません。

解決するのを手伝ってください。前もって感謝します

shell.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 に答える