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将寻找模板，并将在该模板上调用渲染，因此当您在该区域中显示视图时，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在哪里查找模板，那就太棒了。

相反，我通过使用underscore.js的text.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

我的模板＆＃39; my_view.html＆＃39;只是看起来像这样。

<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。

骨干/牵线木偶将HTML附加到一个区域

4 个答案:

使用视图

附加HTML