集成iCanHaz和Marionette

时间:2013-03-26 14:53:25

标签: javascript backbone.js marionette icanhaz.js

我是ICanHaz的忠实粉丝,我试图直接将其整合到我正在构建的新Marionette应用程序中。但是,关闭this post,我写了这个到达渲染方法并在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:

 //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" : "nweingartner@awesome.com",
          "tenant" : "Ginger Ale is Great"
        });

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

这一切都发生在命中索引时调用的方法中。没有JS错误,所以我没有什么可继续的。但是,在渲染功能中,我将数据附加到正文中,它会添加(但会破坏我的布局和区域结构)。

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

任何人都可以帮忙吗?

1 个答案:

答案 0 :(得分:1)

好的,我找不到使用ICH这么简单的方法。但是,由于我发现另一个SO,使用Mustache可以找到非常相似的功能。

使用此代码:

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

允许您更改渲染器,以便您可以使用Marionette的模板调用从index.html中提取胡须模板。小胡子模板看起来像这样:

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

不同之处在于类型是'text / template'而不是'text / html'。否则它的行为非常相似。

希望这有助于其他人。