集成 iCanHaz 和 Marionette [英] Integrating iCanHaz and Marionette

问题描述

我是 ICanHaz 的忠实粉丝，我正在尝试将它直接集成到我正在构建的新 Marionette 应用程序中.然而，离开这篇文章，我写了这个，进入渲染方法并改变它在牵线木偶中:

I'm a big fan of ICanHaz, and I'm trying to directly intregrate it into a new Marionette application I'm building. However, going off this post, I have written this that reaches into the render method and changes it in Marionette:

// Set up Initalizer
    APP.addInitializer(function() {

        //Reach into Marionette and switch out templating system to ICH
        Backbone.Marionette.Renderer.render = function(template, data){
            return ich[template](data);
        }

        //Create Router
        new APP.Routers.GlobalRouter();

        //Start Backbone History
        Backbone.history.start();

    });

如果我遍历这个函数，所有数据似乎都可以正常工作.但是，当投入使用并尝试将其用于布局和项目视图时，不会附加或插入任何内容.这是来自我的 GlobalRouter:

If I walk through this function, all the data seems to work fine. However, when put into use and trying to use it for layouts and Item Views, nothing gets appended or inserted. This is from my GlobalRouter:

 //Grab the main Layout
        var layout = new APP.Views.LayoutView();

        //Render that layout
        layout.render();


        //Make the model
        var userModel = new APP.Models.UserModel({
          "user_name" : "[e-mail]",
          "tenant" : "Ginger Ale is Great"
        });

        //Make the Header Region
        var headerRegion = new APP.Views.HeaderView({model: userModel});
        layout.header.show(headerRegion);

这一切都发生在一个当索引被命中时被调用的方法中.没有 JS 错误，所以我无事可做.但是，它在渲染函数中我将数据附加到正文中，它会添加(但会破坏我的布局和区域结构).

This all happens in a method that gets called when index is hit. There are no JS errors so I have nothing to go on. However, it in the render function I append the data to the body, it will add (however ruining my layout and region structure).

我将模板存储在 index.html 中.

I am storing my templates in index.html.

有人可以帮忙吗?

推荐答案

好吧，我找不到使用 ICH 的简单方法.但是，由于我发现的另一个 SO，仅使用 Mustache 就可以找到非常相似的功能.

Okay, I couldn't find an easy way to do this using ICH. However, due to another SO I found, very similar functionality can be found just using Mustache.

使用此代码:

 Backbone.Marionette.TemplateCache.prototype.compileTemplate = function(rawTemplate) {
    return Mustache.compile(rawTemplate);
 }

允许您更改渲染器，以便您可以使用 Marionette 的模板调用从 index.html 中提取 Mustache 模板.小胡子模板如下所示:

Lets you change the renderer so you can pull mustache templates from index.html using Marionette's template call. A mustache template looks like this:

 <script id="headerTemplate" type="text/template">
        <p>{{user_name}}</p>
        <p>{{tenant}}</p>
    </script>

区别在于类型是text/template"而不是text/html".否则它的行为非常相似.

The difference is that the type is 'text/template' as opposed to 'text/html'. Otherwise it acts very similar.

希望这对其他人有帮助.

Hope this helps someone else.

这篇关于集成 iCanHaz 和 Marionette的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！