个人中心
gpt4 book ai didi

javascript - Backbone 和 Handlebars 渲染 View 与 this.$el.html

转载 作者：行者123 更新时间：2023-12-03 12:31:09 28 4
gpt4 key购买 nike

我已经开始玩主干和 Handlebars ，下面的代码在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

有一个 did 函数允许在 JSON.parse 进入之前返回 fetch。我已经使用过 JSON.stringify和JSON.parse因为handlebars需要一个JavaScript对象，而我的api返回json(我确信有更好的方法)。 console.log(jsObject);给出了正确的 Handlebars 生成的 html，所以不确定为什么它停止，我确实想做类似 var context = template(jsonObject.toJSON()); 的事情因为这将适用于代码中的 block 数据。

编辑:我已清理此内容以删除 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;
    });

关于javascript - Backbone 和 Handlebars 渲染 View 与 this.$el.html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23924646/

28 4 0
文章推荐： javascript - 添加路由器以在 Meteor 中按人名查看帖子
文章推荐： visual-studio-2012 - Visual Studio 2012/2013 中的用户 checkin 历史记录
文章推荐： r - 在R中找到最大值的索引
文章推荐： javascript - Ember.js - 打开模式操作不会从组件中冒出
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com