Javascript 使用AMD时未定义淘汰组件viewmodel_Javascript_Mvvm_Knockout.js_Requirejs_Components

Javascript 使用AMD时未定义淘汰组件viewmodel

javascript mvvm knockout.js requirejs

Javascript 使用AMD时未定义淘汰组件viewmodel,javascript,mvvm,knockout.js,requirejs,components,Javascript,Mvvm,Knockout.js,Requirejs,Components,我一直在尝试将Knockout组件与require.js一起用于我一直在从事的一个项目。当我使用组件时，它将显示HTML模板，但是模板中的绑定抛出一个引用错误，表示字段未定义。我相信这是因为1。viewModel未定义，或为2。viewModel未绑定到模板。然而，我不知道如何修复它我正在使用phpStorm和Firefox开发者版中的内置服务器 index.php <?php namespace project; ?> <!DOCTYPE html> &l

我一直在尝试将Knockout组件与require.js一起用于我一直在从事的一个项目。当我使用组件时，它将显示HTML模板，但是模板中的绑定抛出一个引用错误，表示字段未定义。我相信这是因为1。viewModel未定义，或为2。viewModel未绑定到模板。然而，我不知道如何修复它

我正在使用phpStorm和Firefox开发者版中的内置服务器

index.php

<?php
    namespace project;
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Project | Admin</title>

    <link rel="stylesheet" href="css/grid.css"/>

    <style>
    </style>

</head>
<body>

    <admin-header params=""></admin-header>

    <script src="js/vendor/require.js" data-main="js/app"></script>
</body>
</html>

AdminViewModel.js

 define(['knockout', 'postbox', 'ComponentManager'], function( ko, postbox,  ComponentManager) {
    return function AdminViewModel() {
        var self = this;

        self.pageTitle = ko.observable('Home').publishOn('pageTitle');

        var componentManager = new ComponentManager();
        componentManager.registerComponents(['admin-header']);

        /*
        // doesnt work when registered in the parent view either

        ko.components.register(
            'admin-header', {
                require: 'components/admin-header/admin-header'
            }
        );
        */

    }
});

组件管理器，js

define(['knockout', 'underscore', 'require'], function(ko, _, require){
    return function ComponentManager() {
        this.registerComponents = function(components) {

            _.each(components, function (component) {
                var componentPath = 'components/' + component + '/' + component;

                console.log("registering: " + componentPath );
                ko.components.register(component, {
                    require:  componentPath
                });
            });

        }
    }
});

admin-header.js 定义['knockout'，'postbox'，'text！。/admin-header\u template.html']

function(ko, postbox, template){

   function AdminHeaderModel(params){
        var self = this;

        self.pageTitle = ko.observable('Title');//.subscripeTo('pageTitle', true, function(title){return title.toUpperCase()});
   }


    return {
        viewmodel: AdminHeaderModel,
        template: template
    };

});

admin-header-template.html

<div>
<h1>Project</h1>
<h1 data-bind="text: pageTitle"></h1>
</div>

在管理标头组件代码中，需要返回viewModel属性，而不是viewModel

谢谢，我甚至没有意识到那个错误。组件现在工作得很好。

<div>
<h1>Project</h1>
<h1 data-bind="text: pageTitle"></h1>
</div>