Question

我正在努力使用requireJS安排我的代码，并会感谢任何帮助。

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

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

请注意，如果我只是使用脚本src = ...等在html中包含这些脚本，这是正常的。

但是当我删除脚本标记并将这些依赖项推送到dashboard viewmodel时，我收到此错误：

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

我需要做些什么才能满足GridList lib的要求？

以下是发出此错误的页面（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
            });
        }
    }
};

}）;

另外，我不喜欢我需要在viewmodel中引用#grid但不知道更好的事实。任何建议都会有所帮助。

由于

Answer 1

我没有使用您正在使用的gridList，但我发现他们检查了window.GridList是否会引发您看到的错误。在AMD设置中，它不会在窗口中显示。他们应该检查来自其依赖关系的GridList是否存在。

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

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

        // your other code
    });

就访问#grid元素而言，您可以访问任何元素parentNode，或者更好地考虑在实际初始化{{1}的父元素上使用custom binding }。

RequireJS Knockout Amd-Helper

1 个答案: