主干和车把渲染视图.$el.html

Backbone and Handlebars Rendering View with this.$el.html

本文关键字：视图 el html      更新时间：2023-09-26

我已经开始玩骨干和车把，下面的代码在this.$el.html(jsObject);中断，并给出下一个错误:

Uncaught TypeError: Cannot read property 'html' of undefined tasks.js:26
(anonymous function) tasks.js:26
fire jquery.js:3119
self.fireWith jquery.js:3231
done jquery.js:9275
callback jquery.js:9685

有一个done函数允许fetch在JSON之前返回。Parse进来了。我使用JSON.stringify和JSON.parse作为车把想要一个JavaScript对象和我的api返回json(我相信有一个更好的方法)。console.log(jsObject);给出了正确的车把生成的html，所以不确定为什么它停止，我确实想做一些像var context = template(jsonObject.toJSON());的事情，因为这将与代码中的块数据一起工作。

编辑:我已经清理了这一点，以删除JSON.stringify和JSON.parse，并使用toJSON()，并把完整的错误。使用Backbone 1.1.2和JQuery v1.11.1. 
var serverUrl           = 'http://test.local/'; 
var Event = Backbone.Model.extend({});
var EventCollection = Backbone.Collection.extend({
    model: Event,
    url: serverUrl + 'events'   
});
var EventListView = Backbone.View.extend({
    el: "#events",
    initialize: function(){
        this.render();              
    },
    render: function () {
        var events = new EventCollection;
        var eventsFetch = events.fetch({
            success : function(data){
                events = ((data));
    //          console.log(events); 
            }       
        });
        eventsFetch.done(function(){
            var template = Handlebars.compile( $("#events-template").html() );
            var rendered = template(events.toJSON());
                console.log(rendered);
            this.$el.html(rendered);
            return this;
        });     
    }
}); 
var EventListView = new EventListView();
HTML 

<body>
    <div id="events"></div>
        <script id="events-template" type="text/x-handlebars-template">
            <table>
                {{#each []}} 
                <tr>
                    <td>{{this.event_id}}</td>
                    <td>{{this.entity_id}}</td>
                    <td>{{this.event_title}}</td>
                    <td>{{this.event_desc}}</td>
                    <td>{{this.event_state}}</td>
                    <td>{{this.id}}</td>
                </tr>
                {{/each}}
            </table>
        </script>
<script type="text/javascript" src="js/tasks.js" /></script>
</body>
</html>

似乎您的this引用在您的延迟解析时作用域不正确。试试这个:

var _this = this;
eventsFetch.done(function(){
        var template = Handlebars.compile( $("#events-template").html() );
        var rendered = template(events.toJSON());
            console.log(rendered);
        _this.$el.html(rendered);
        return _this;
    });

可以使用jQuery。代理保留作用域:

eventsFetch.done($.proxy(function(){ var template = Handlebars.compile( $("#events-template").html() ); var rendered = template(events.toJSON()); console.log(rendered); this.$el.html(rendered); return this; }, this));

相关文章：