Backbone Marionette - 模板中的日志模型

时间:2015-01-08 20:40:26

标签: javascript jquery backbone.js marionette

我想知道如何记录Backbone.Marionette CompositeView模板中使用的模型?

我使用的<% console.log(model) %>会导致错误Uncaught ReferenceError: model is not defined

有没有办法从模板中记录模型的内容?

以下是我的代码的小提琴:http://jsfiddle.net/16L1hen4/

这是我的模板和JavaScript

模板:

<div id="main"></div>

<script type="text/template" id="tree-template">
    <li><%- name %></li>

    <% //This console.log fails and I don't know why %>
    <% console.log('inside template model =',model) %>
</script>

JavaScript的:

var App = new Backbone.Marionette.Application();

App.addRegions({
    mainRegion: '#main' 
});

var TreeModel = Backbone.Model.extend({    
});

var TreeCollection = Backbone.Collection.extend({
    model: TreeModel,

    url: 'https://api.mongolab.com/api/1/databases/backbone-tree/collections/tree?apiKey=akey'

});

// Tree branch view
var CompositeView = Backbone.Marionette.CompositeView.extend({    
    tagName: 'ul',

    template: _.template( $('#tree-template').html() )
});

// Tree root view
var CollectionView = Backbone.Marionette.CollectionView.extend({   
    tagName: 'div',

    className: 'js-tree-root',

    childView: CompositeView,
});

var treeCollection = new TreeCollection();
treeCollection.fetch().done(function () {
    var collectionView = new CollectionView({collection: treeCollection});
    App.mainRegion.show(collectionView);    

});

编辑:在常规的Backbone.View中,我可以将模型作为属性传递给数据。请注意,在此示例中,View的模型将传递给具有data属性的模板,该属性可以记录在模板中。这可以在模板中用于测试模型上属性的存在。我不知道如何使用Marionette CompositeView

来做到这一点
var jsonData = {
    "color": "red"
};

var TheModel = Backbone.Model.extend({    
});

var TheView = Backbone.View.extend({
    el: '#main',

    tagName: 'ul',

    template: _.template( $('#the-template').html() ),

    render: function () {
        var tmpl = this.template({data: this.model.toJSON()});

        this.$el.html( tmpl );
    }
});

var theModel = new TheModel(jsonData);

var theView = new TheView({model: theModel});
theView.render();


<div id="main"></div>

<script type="text/template" id="the-template">
    <li><%- data.color %></li>

    <% //Log the current model that the template uses %>
    <% console.log('template model =',data) %>
</script>

1 个答案:

答案 0 :(得分:1)

这恰好与我在您的问题上发布的回答有关:Backbone Marionette Composite View Rendering Template

并且是由同一问题引起的。 model在模板上下文中未定义。 传递给您模板的数据如下:

{_id: Object, name: "Level 1", children: Array[2]}

model在此上下文中未定义。

如果您想记录/控制传递给模板的数据,您应该以这样的方式使用SerializeData

var CompositeView = Backbone.Marionette.CompositeView.extend({    
    tagName: 'ul',
    serializeData: function(){
        var data = Backbone.Marionette.CompositeView.prototype.serializeData.apply(this, arguments);
        console.log(data);
        return data;
    },
    template: _.template( $('#tree-template').html() )
});