当前位置： 文江博客话题详情

主干视图渲染未创建

发布于 2024-12-17 19:03:48 字数 2613 浏览 0 评论 0原文

刚从主干开始，几个小时后似乎甚至无法使视图渲染正常工作。我已将所有适当的 JavaScript 文件包含在 HTML 中。这是我的脚本：

(function($) { 
// MODELS
var Paper = Backbone.Model.extend ({
    defaults : {
        title : null,
        author: null,
    }
});

// COLLECTIONS
var PaperCollection = Backbone.Collection.extend({
    model : Paper,
    initialize : function() {
        console.log("We've created our collection");
    }
});

// VIEWS
var PaperView = Backbone.View.extend({
    tagName:'li',
    className: 'resultTable',
    events: {
        'click .ptitle':'handleClick'
    },

    initialize: function() {
        _.bindAll(this, 'render', 'handleClick');
    },

    render: function() {
        $(this.el).html('<td>'+this.model.get('title')+'</td>');
        return this; // for chainable calls
    },

    handleClick: function() {
        alert('Been clicked');
    }
});


var ListView = Backbone.View.extend({
    events: {
    //"keypress #new-todo":  "createOnEnter",
},

    initialize : function() {
        console.log('Created my app view');
        _.bindAll(this, 'render', 'addOne', 'appendOne');

        this.collection = new PaperCollection();
        this.collection.bind('add', this.appendOne); // collection event binder

        this.counter = 0;
        this.render();
    },

    render : function() {
        console.log('Render app view');
        $(this.el).append("<button id='add'>Add list item</button>");
        $(this.el).append("<p>More text</p>");
  // $(this.el).append("<ul></ul>");

  /*
        _(this.collection.models).each(function(item){      // in case collection is not empty
    appendOne(item);
  }, this); */
    },

    addOne: function() {
  this.counter++;
  var p = new Paper();
  p.set({
    title: "My title: " + this.counter // modify item defaults
  });
  this.collection.add(p);
    },

    appendOne: function(p) {
    var paperView = new PaperView({
    model: p
  });
  $('ul', this.el).append(paperView.render().el);
}
});

var App = new ListView({el: $('paper_list') });
// App.addOne();

})(jQuery);

注意在 FF 上的控制台中没有收到任何错误 - 但仍然没有在 AppView 中显示任何渲染输出）。感谢任何帮助。简单的 HTML：

<body>
    <div class="container_16">


        <div class="grid_16">
            <div id="paper_list">
                Text...

                <ul class="thelist"></ul>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</body>
原文

Just beginning with backbone and after few hours can't seem to get even a view render working correctly. I've included all appropriate JavaScript files in HTML. Here is my script:

(function($) { 
// MODELS
var Paper = Backbone.Model.extend ({
    defaults : {
        title : null,
        author: null,
    }
});

// COLLECTIONS
var PaperCollection = Backbone.Collection.extend({
    model : Paper,
    initialize : function() {
        console.log("We've created our collection");
    }
});

// VIEWS
var PaperView = Backbone.View.extend({
    tagName:'li',
    className: 'resultTable',
    events: {
        'click .ptitle':'handleClick'
    },

    initialize: function() {
        _.bindAll(this, 'render', 'handleClick');
    },

    render: function() {
        $(this.el).html('<td>'+this.model.get('title')+'</td>');
        return this; // for chainable calls
    },

    handleClick: function() {
        alert('Been clicked');
    }
});


var ListView = Backbone.View.extend({
    events: {
    //"keypress #new-todo":  "createOnEnter",
},

    initialize : function() {
        console.log('Created my app view');
        _.bindAll(this, 'render', 'addOne', 'appendOne');

        this.collection = new PaperCollection();
        this.collection.bind('add', this.appendOne); // collection event binder

        this.counter = 0;
        this.render();
    },

    render : function() {
        console.log('Render app view');
        $(this.el).append("<button id='add'>Add list item</button>");
        $(this.el).append("<p>More text</p>");
  // $(this.el).append("<ul></ul>");

  /*
        _(this.collection.models).each(function(item){      // in case collection is not empty
    appendOne(item);
  }, this); */
    },

    addOne: function() {
  this.counter++;
  var p = new Paper();
  p.set({
    title: "My title: " + this.counter // modify item defaults
  });
  this.collection.add(p);
    },

    appendOne: function(p) {
    var paperView = new PaperView({
    model: p
  });
  $('ul', this.el).append(paperView.render().el);
}
});

var App = new ListView({el: $('paper_list') });
// App.addOne();

})(jQuery);

Note not getting any errors in console on FF - but still not displaying any of the render outputs in AppView). Appreciate any help. Simple HTML:

<body>
    <div class="container_16">


        <div class="grid_16">
            <div id="paper_list">
                Text...

                <ul class="thelist"></ul>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</body>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

昵称有卵用 2024-12-24 19:03:48

这至少会让你渲染 ListView...

// MODELS
var Paper = Backbone.Model.extend ({
    defaults : {
        title : null,
        author: null,
    }
});

// COLLECTIONS
var PaperCollection = Backbone.Collection.extend({
    model : Paper,
    initialize : function() {
        console.log("We've created our collection");
    }
});

// VIEWS
var PaperView = Backbone.View.extend({
    tagName:'li',
    className: 'resultTable',
    events: {
        'click .ptitle':'handleClick'
    },

    initialize: function() {
        _.bindAll(this, 'render', 'handleClick');
    },

    render: function() {
        $(this.el).html('<td>'+this.model.get('title')+'</td>');
        return this; // for chainable calls
    },

    handleClick: function() {
        alert('Been clicked');
    }
});


var ListView = Backbone.View.extend({
    el: '#paper_list',

    events: {
        "click #add":  "createOnEnter",
    },

    initialize : function() {
        console.log('Created my app view');
        _.bindAll(this, 'render', 'addOne', 'appendOne');

        this.collection = new PaperCollection();
        this.collection.bind('add', this.appendOne); // collection event binder

        this.counter = 0;
        this.render();
    },

    render : function() {
        console.log(this);
        $(this.el).append("<button id='add'>Add list item</button>");
        $(this.el).append("<p>More text</p>");
  // $(this.el).append("<ul></ul>");

  /*
        _(this.collection.models).each(function(item){      // in case collection is not empty
    appendOne(item);
  }, this); */
    },

    addOne: function() {
        this.counter++;
        var p = new Paper();
        p.set({
            title: "My title: " + this.counter // modify item defaults
        });
        this.collection.add(p);
    },

    appendOne: function(p) {
        var paperView = new PaperView({
            model: p
        });
        $('ul', this.el).append(paperView.render().el);
    }
});


$(function(){
    var App = new ListView();
});

有几件事...首先，我在 document.ready 中初始化了 ListView 以确保 DOM 已准备就绪，其次，我在列表视图中简单地制作了 el #paper_list 然后你可以稍后执行 $(this.el) 。

我至少得到了按钮和“更多文本”显示......让我知道这是否有帮助！

This will at least get you rendering the ListView...

// MODELS
var Paper = Backbone.Model.extend ({
    defaults : {
        title : null,
        author: null,
    }
});

// COLLECTIONS
var PaperCollection = Backbone.Collection.extend({
    model : Paper,
    initialize : function() {
        console.log("We've created our collection");
    }
});

// VIEWS
var PaperView = Backbone.View.extend({
    tagName:'li',
    className: 'resultTable',
    events: {
        'click .ptitle':'handleClick'
    },

    initialize: function() {
        _.bindAll(this, 'render', 'handleClick');
    },

    render: function() {
        $(this.el).html('<td>'+this.model.get('title')+'</td>');
        return this; // for chainable calls
    },

    handleClick: function() {
        alert('Been clicked');
    }
});


var ListView = Backbone.View.extend({
    el: '#paper_list',

    events: {
        "click #add":  "createOnEnter",
    },

    initialize : function() {
        console.log('Created my app view');
        _.bindAll(this, 'render', 'addOne', 'appendOne');

        this.collection = new PaperCollection();
        this.collection.bind('add', this.appendOne); // collection event binder

        this.counter = 0;
        this.render();
    },

    render : function() {
        console.log(this);
        $(this.el).append("<button id='add'>Add list item</button>");
        $(this.el).append("<p>More text</p>");
  // $(this.el).append("<ul></ul>");

  /*
        _(this.collection.models).each(function(item){      // in case collection is not empty
    appendOne(item);
  }, this); */
    },

    addOne: function() {
        this.counter++;
        var p = new Paper();
        p.set({
            title: "My title: " + this.counter // modify item defaults
        });
        this.collection.add(p);
    },

    appendOne: function(p) {
        var paperView = new PaperView({
            model: p
        });
        $('ul', this.el).append(paperView.render().el);
    }
});


$(function(){
    var App = new ListView();
});

A couple of things...First, I initialized your ListView inside of a document.ready to make sure that the DOM was ready to go, second, I made the el in the listview simply #paper_list then you can do $(this.el) later.

I at least got the button and "more text" to show up...Let me know if that helps!

回复 原文
~没有更多了~

关于作者

诗酒趁年少

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

陈静维

文章 0 评论 0

深海里的那抹蓝

文章 0 评论 0

给妤﹃绝世温柔

文章 0 评论 0

谢绝鈎搭

文章 0 评论 0

时光清浅

文章 0 评论 0

温柔女人霸气范

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文