RequireJS淘汰賽Amd-Helper

Question

我正在努力使用requireJS安排我的代碼，將不勝感激。

我有一個dashboard.html，它綁定到dashboard-init.js中的“ dashboard”視圖模型。 儀表板視圖模型具有一個面板列表，這些面板在dashboard.html中顯示為列表。

渲染完成后，我調用gridList函數將列表轉換為儀表板。

請注意，如果我只是使用腳本src = ...等將這些腳本包含在html中，則此方法可以正常工作。

但是，當我刪除腳本標簽並將這些依賴項推到儀表板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或者更好地考慮在實際初始化GridList的父元素上使用自定義綁定。

RequireJS淘汰賽Amd-Helper

問題描述

1 個解決方案

解決方案1
1 已采納 2015-03-17 02:00:58

RequireJS淘汰賽Amd-Helper

問題描述

1 個解決方案

解決方案1 1 已采納 2015-03-17 02:00:58

解決方案1
1 已采納 2015-03-17 02:00:58