RequireJS 淘汰赛 Amd-Helper

Question

我正在努力使用 requireJS 来安排我的代码，我将不胜感激任何帮助。

我有一个 dashboard.html，它绑定到仪表板中的 'dashboard' 视图模型-init.js。仪表板视图模型有一个面板列表，在 dashboard.html 中显示为列表。

渲染完成后，我调用 gridList 函数将列表转换为仪表板。

请注意，如果我只是将这些脚本包含在 html 使用脚本 src=... 等

但是当我删除脚本标签并将这些依赖项推送到仪表板视图模型时，出现此错误：

Uncaught Error: Unable to process binding "foreach: function (){return { data:Panels,afterRender:postRender} }" Message: GridList lib required

我需要做什么才能满足 GridList 库要求？

这是出现此错误的页面 (dashboard.html)：

<html>
<head>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
    <div class="grid-container">
        <ul id="grid" class="grid" data-bind="foreach: { data: Panels, afterRender: postRender }">
            <li ...">
                ...
            </li>            
        </ul>
    </div>
    <script src="Scripts/require.js"></script>
    <script src="viewmodels/common-init.js"></script>
    <script src="viewmodels/dashboard-init.js"></script>

</body>

这是 common-init 的样子：

requirejs.config({
baseUrl: "../Scripts",
paths: {
    "jquery": "jquery-2.0.3.min",
    "jqueryui": "jquery-ui-1.11.4.min",
    "knockout": "knockout-3.3.0",
    "knockout-amd-helpers": "knockout-amd-helpers",
    "text": "text"
},
shim: {
    'gridList': ['jquery'],
    'jquery.gridList': ['jquery','gridList']
}

});

这里是 dashboard-init

require(["knockout", "../viewmodels/modules/dashboard", "knockout-amd-helpers", "text"], function (ko, dashboard) {

ko.amdTemplateEngine.defaultPath = "../templates";

ko.bindingHandlers.module.baseDir = "modules";

ko.bindingHandlers.module.templateProperty = "embeddedTemplate";

setTimeout(function () {
    ko.applyBindings(new dashboard());
}, 0);

});

最后，这是仪表板模块：

define(["knockout", "jquery", "jqueryui", "gridList", "jquery.gridList"], function (ko) {
return function () {
    var self = this;

    self.Panels = [{...}, {...}];

    self.postRender = function(elements, data) {
        if (this.foreach[this.foreach.length - 1] === data) {
            $('#grid').gridList({
                rows: 3,
                widthHeightRatio: 264 / 294,
                heightToFontSizeRatio: 0.25
            });
        }
    }
};

});

此外，我不喜欢这样的事实，即我需要在视图模型中引用#grid 但不知道更好。任何建议都会有所帮助。

谢谢

Answer 1

我没有使用过您正在使用的 gridList，但我看到他们对 window.GridList 进行了检查，这会引发您所看到的错误。在 AMD 设置中，它不会暴露在 window 上。他们应该检查依赖项中的 GridList 是否存在。

您可以通过以下方式解决此问题：

define(["knockout", "jquery", "gridList", "jqueryui", "jquery.gridList"], function (ko, $, GridList) {
        window.GridList = GridList;

        // your other code
    });

就访问 #grid 元素而言，您可以访问任何元素 parentNode，或者最好考虑在实际初始化 [=] 的父元素上使用 custom binding 15=].

RequireJS 淘汰赛 Amd-Helper

RequireJS Knockout Amd-Helper

requirejs

knockout.js

knockout-amd-helpers