0

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

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

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

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

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

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']
}

});

这是仪表板初始化

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 但不知道更好的事实。任何建议都会有所帮助。

谢谢

4

1 回答 1

1

我没有使用gridList你正在使用的那个，但我看到他们有一个检查window.GridList是抛出你看到的错误。在 AMD 设置中，它不会暴露在窗口上。他们应该检查其依赖项中的 GridList 是否存在。

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

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

        // your other code
    });

至于访问#grid元素，您可以parentNode改为访问任何元素，或者更好地考虑在实际初始化GridList.

于 2015-03-17T02:00:58.017 回答