使用AMD时未定义淘汰组件视图模型

Knockout component viewmodel not defined when using AMD

本文关键字：组件 视图 模型 淘汰 未定义 AMD 使用      更新时间：2023-09-26

我一直在尝试为我正在处理的项目使用带有require.js的Knockout组件。当我使用该组件时，它将显示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>

app.js

    requirejs.config({
    paths: {
        jquery: 'vendor/jquery',
        postbox: 'vendor/knockout-postbox',
        domReady: 'vendor/domReady',
        text: 'vendor/text',
        knockout: 'vendor/knockout',
        hashchange: 'vendor/hashchange',
        underscore: 'vendor/underscore',
        ComponentManager: 'components/ComponentManager'
    },
    shim: {
        knockout: {
            deps: ['jquery']
        },
        hashchange: {
            deps: ['jquery']
        },
        underscore:{
            exports: '-'
        }
    }
});

require(['knockout', 'AdminViewModel', 'domReady!'], function(ko, AdminViewModel){
    ko.applyBindings(new AdminViewModel());
});

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'
            }
        );
        */
    }
});

ComponentManager，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.jsdefine（['knocket'，'postbox'，'text！./admin-header_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>

在admin-header组件代码中，需要返回viewModel属性，而不是viewmodel。

相关文章：