将 HTML 附加到区域中的主干/牵线木偶

Question

我开始在现有的主干应用程序中使用 Marionette。我有一些 HTML 想要附加到一个区域中。在纯粹的主干中，我可以做this.$el.append(html_code)，仅此而已。据我所知，木偶区域只允许对视图进行操作（必须实现render 方法）。在木偶区域调用 append 会引发“未定义方法”错误。

是否可以将纯 HTML 附加到木偶区域？

Answer 1

不，不可能将纯 html 注入 Marionette.Region。

理论上，您可以使用someRegion.el 或someRegion.getElement() 访问区域 DOM 元素，但这必须在渲染后完成（至少在具有标准行为的 Marionette.View 中是不可能的)。

但是你可以通过使用特制的Marionette.ItemView来达到想要的效果：

@someRegion.show(new Marionette.ItemView({template: '<h1>gach</h1>'}));

---

您也许还应该看看Marionette.Renderer 。

Answer 2

Marionette ItemView 将查找模板并在该模板上调用 render，因此当您在区域中显示视图时，html 将很好地显示，而无需您定义渲染方法。

MyImtemView = Backbone.Marionete.ItemView.extend({
    template : "#myTemplate"  
});

var myItemView = new MyItemView();
myLayout.aregion.show(myItemview);

如果您将 html 保存在这样的模板中，这应该可以工作

`<script id="myTemplate" type="text/template">
  <div><p>your html<p>
  </div>

`

编辑

你也可以在你的视图中声明一个渲染函数，以防你需要像这样生成和修改你的html。

MyImtemView = Backbone.Marionete.ItemView.extend({
    template : "#myTemplate",
    render : function (){
       this.$el.append(HMTL); //so here you work your html as you need


    }
});

var myItemView = new MyItemView();
myLayout.aregion.show(myItemview); //the render function of your view will be called here

Answer 3

我遇到了同样的问题并尝试了此处解释的答案，但我也在使用 require.js 并不断收到找不到 #my_view 模板的错误。如果有人能澄清 Marionette 默认在哪里查找模板，那就太好了。

相反，我通过使用 text.js 插件 for underscore.js 解决了这个问题。这样，您实际上可以 使用纯html 文件作为模板，无需 将其嵌套在脚本标签中。以下是我的做法。

define(['backbone', 'underscore', 'marionette', 'text!tmpl/my_view.html'], function(Backbone, _, Marionette, view_t){

    var MyView = Backbone.Marionette.ItemView.extend({

        template : function(serialized_model) {
            //define your parameters here
            param1 = erialized_model.param1;

            return _.template(view_t)({
                param1: param1
            });
        }
    });
    return MyView;
});

我将 text.js 插件与我的所有其他 js 库放在同一个 lib 目录中，并且我的 main.js for require 将模板的路径声明为

'tmpl':     '../../templates',

我的项目结构是这样的

root
    index.html
    js
        main.js
        app
             App.js
             views
                 MyView.js
        lib
            require.js
            text.js
            backbone.js
            underscore.js
            jquery.js
            backbone.marionette.js
    templates
        my_view.html

我的模板“my_view.html”看起来像这样。

<h1>THIS IS FROM THE TEMPLATE!!!</h1>

完美运行。我希望你觉得它有用。

Answer 4

使用视图

var myHtml = '<h1>Hello world!</h1>';
var myView = new Marionette.ItemView({template: _.constant(myHtml)});
myRegion.show(myView);

Marionette.Renderer.render 采用函数或模板名称 (source code)。 _.constant 创建一个返回传入参数的函数。

附加 HTML

另外，Marionette.Region 的文档提到覆盖 attachHtml 方法，请参阅 Set How View's el Is Attached。