Question

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

我找到了marionette-dust插件可以完成这项工作，但目前我无法理解如何将它与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配置文件中的'backbone'，'dust'和'marionette'然后定义在初始应用程序设置期间，此模块的AMD版本作为依赖关系。

该插件的编写假设您已经编译了所有的灰尘模板并且它们位于灰尘缓存中（您应该在灰尘文档中找到有关如何执行此操作的详细信息）。你可能会看到为什么你看看插件源代码。在每个视图中，只需将template属性设置为要使用的灰尘缓存中的模板名称。

该插件会覆盖所有视图使用的render对象中的Marionette.Renderer函数。所以基本上在幕后，Marionette调用此插件的render函数，该函数使用Dust呈现模板，然后返回HTML。 Marionette的文档here提到这是提供自定义渲染的最佳方式。

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

我写了一个名为generator-maryo的Yeoman发电机，为木偶和尘埃网应用提供脚手架。那里还有一些待办事项，但它为你如何使用牵线木偶粉末插件提供了良好的基础。如果我能在任何领域更明确，那么请告诉我。

编写补充问题后的编辑

marionette-dust插件可以通过模板名称访问，而不是通过编译的模板功能访问。所以基本上你需要运行编译的模板函数（它应该自己做，因为它是一个匿名函数），然后它将被放置在名为“demo”的尘埃缓存中。因此，您的项目视图应如下所示：

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属性设置为“demo”。此外，这是演示应用程序的所有代码吗？您需要使用区域实际显示视图，或者您可以手动调用视图上的render函数。为了快速完成某些工作，您可以执行以下操作：

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

另外，为什么要在模块中包装视图？由于您已经在使用RequireJS，因此Marionette的模块系统并不是必需的。我正在使用generator-maryo为Marionette编写演示应用程序，这可能会解释很多。在github回购中留意它。

使用带有backbone.marionette和require.js的dust.js模板

testView.js

test.dust

main.js

1 个答案: