Question

我为Ractive.js测试了新的Backbone适配器，它像魅力一样加载example ...

<script src='lib/Ractive.js'></script>
<!-- the adaptor -->
<script src='lib/adaptors/Backbone.js'></script>

现在我正在尝试使用require.js加载AMD中的模块并且ractive.backbone适配器抱怨因为尚未加载ractive库...

define(["ractive","ractive.backbone"], function(Ractive) {....});

来自ractive.backbone.js（未捕获的ReferenceError：未定义Ractive）

如何将最佳实践加载到AMD的Ractive适配器？

Answer 1

没有一种真实的方式，因为每个AMD项目都不同（有些人在define函数中包装Backbone，有些人使用shim配置，每个人都将事物组织到不同的文件夹结构中。 ..）。但是，基本上，适配器需要在同时包含Ractive和Backbone的词法范围内运行。

所以接近它的一种方法是创建一个简单的包装模块，如下所示：

define(["ractive","backbone"], function (Ractive, Backbone) {
  // adaptor code goes here. No need to include the outer IIFE
  // (https://github.com/Rich-Harris/Ractive/blob/master/plugins/adaptors/Backbone.js)
});

然后，您可以继续

define(["ractive","ractive.backbone"], function(Ractive) {....});

对于同时使用Ractive和Backbone适配器的每个模块，或者您可以在应用程序启动时需要一次Backbone适配器 - 只要在Ractive呈现任何内容之前需要它，它就会起作用：

// in main.js, or equivalent
require(["app","ractive.backbone"], function (app) {
  app.init(); // or whatever
});

对于如何使整个事情更加不言自明，我们愿意接受建议！

Answer 2

在我们的项目中，我们使用的设置非常类似于Richard Harris在此描述的设置。即我们有一个包含适配器的包装器模块（ractive.wrap.js），然后使用require.config的map选项来提供包装器而不是Ractive本身。看起来像这样：

require.config(
{
    "map":
    {
        "*": {"ractive": "ractive.wrap"},
        "ractive.wrap": {"ractive": "ractive"}
    }
}

无论何时使用

define (['ractive'], function(Ractive)
{
    // some cool function using ractive
});

你实际上已经使用Backbone适配器获得了Ractive。

使用Require.js在AMD中加载Ractive.js适配器

2 个答案: