将dust.js模板与backbone.marionette和require.js结合使用

Question

我正在构建一个使用主干和木偶的大规模应用程序。我计划使用dust.js，而不是使用下划线模板引擎。

我已经找到了木偶-尘埃插件，它可以完成这项工作，但目前我不知道如何使用它与require.js。另外，除了使用这个插件之外，还有更好的实现灰尘的方法吗？

反馈意见很受欢迎。

下面是示例应用程序中的代码

testView.js

  define(["app", "templates/test.dust"], function(app, testTpl){
    app.module("test.view", function(view, app, Backbone, Marionette, $, _){

      view.list = Marionette.ItemView.extend({
        template: testTpl,
      });
    });

    return app.test.view;
  });

test.dust

(function() {
  dust.register("demo", body_0);

  function body_0(chk, ctx) {
    return chk.write("This is Dust.js Test");
  }
  return body_0;
})();

main.js

    requirejs.config({
      baseUrl: "assets/js",
      paths: {
        backbone: "vendor/backbone-min",
        jquery: "vendor/jquery-min",
        marionette: "vendor/backbone.marionette-min",
        tpl: "vendor/tpl",
        underscore: "vendor/underscore-min",
        dust: "vendor/dust",
        dustHelpers: 'vendor/dust-helpers',    
        dustMarionette: "vendor/backbone.marionette.dust",
        templates: 'templates/compiled',    
      },

      shim: {
        jquery: {
          exports: 'jquery'
        },

        underscore: {
          exports: "_"
        },
        backbone: {
          deps: ["jquery", "underscore"],
          exports: "Backbone"
        },
        marionette: {
          deps: ["backbone"],
          exports: "Marionette"
        },

        dust: {
            exports: 'dust'
        },
        dustHelpers: ['dust'],
        templates: ['dust', 'dustMarionette']
      }
    });

    require(["app"], function(app){
      app.start();
    });

Answer 1

我是那个插件的作者。基本上，您需要在Requirejs配置文件中定义三个依赖项“主干”、“灰尘”和“木偶”，然后在初始应用程序设置期间，将该模块的AMD版本定义为一个依赖项。

这个插件是在假设您已经编译了所有灰尘模板并且它们位于尘缓存中的假设下编写的(您应该在尘埃文档中找到如何这样做的详细信息)。如果你看一下插件源代码，你可能会明白为什么。在每个视图中，只需将template属性设置为要使用的灰尘缓存中模板的名称。

插件覆盖所有视图使用的render对象中的Marionette.Renderer函数。因此，基本上在幕后，Marionette调用这个插件的render函数，它用Dust呈现模板，然后返回HTML。木偶的文档这里提到这是提供自定义呈现的最佳方法。

我试图在插件的自述文件中概述所有这些，但是如果您认为它可以改进(我不怀疑它可以改进)，那么请告诉我哪些地方不清楚。

我编写了一个名为发电机-maryo的约曼生成器，为木偶和灰尘web应用程序提供脚手架。还有一些待办事项，但它为你提供了一个良好的基础，如何使用木偶-灰尘插件与木偶。如果我可以在任何领域更明确，那就让我知道。

在添加到问题的代码之后进行编辑

这个木偶-尘埃插件是通过模板名访问的，而不是通过编译的模板函数访问的。因此，从本质上说，您需要运行编译好的模板函数(它应该自己执行，因为它是一个匿名函数)，然后它将以“演示”的名称放在尘埃缓存中。因此，项目视图应该如下所示：

define(["app", "templates/test.dust"], function(app, testTpl){
    app.module("test.view", function(view, app, Backbone, Marionette, $, _){

        view.list = Marionette.ItemView.extend({
            template: "demo",
        });
    });

    return app.test.view;
});

请注意，我所做的只是将template属性设置为“演示”。另外，这是演示应用程序的全部代码吗？您需要使用区域实际显示视图，或者只需手动调用视图上的render函数即可。要使某些事情快速工作，您可以这样做：

myView = new app.test.view;
$('body').append(myView.render().$el);

另外，为什么要将视图包装在模块块中？由于您已经在使用RequireJS，所以Marionette的模块系统并不是真正必要的。我正在为Marionette编写一个使用生成器-maryo的演示应用程序，这可能会解释很多。在github回购处留意一下。