个人中心
gpt4 book ai didi

javascript - Backbone.js Collection View 通过模型 View

转载 作者：行者123 更新时间：2023-12-02 15:07:04 24 4
gpt4 key购买 nike

对于下面的困惑，我深表歉意 - 在执行以下代码时遇到一些困难。尝试通过 Collection View 显示每个模型 View ，但这并不需要简洁。任何帮助将不胜感激。还有提示和指示。预先感谢您。

$(function() {

/* Model */
var Publication = Backbone.Model.extend({
    defaults: {
        title: "",
        published: ""
    }
});

/* Collection */
var PublicationCollection = Backbone.Collection.extend({
    model: Publication,
    url: 'http://www.stellarbiotechnologies.com/media/press-releases/json'
});

/* Model View */
var PublicationView = Backbone.View.extend({
    tagName: 'li',
    className: 'publication',
    el: 'displayHere',
    template: _.template($('#publicationTemplate').html()),

    initialize: function() {
        this.model.on('destroy', this.remove, this);
    },

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

/* Collection View */
var AppView = Backbone.View.extend({
    tagName: 'ul',

    initialize: function() {

        var pubs = this.collection;
        pubs.fetch;
        pubs.bind('reset', this.render);
        pubs.bind('add', this.add, this);
        pubs.bind('remove', this.remove, this);    
    },

    render : function() {
        this.collection.each(this.add, this);
        return this;
    },

    add: function(pub) {
        var pub = new PublicationView({model: Publication});
        this.$el.html(pub.render().el);
    },    

    remove: function(pub) {
        var pubs = this.collection;
        pubs.remove(pub);
        pubs.render();
    },

});

var App = new AppView({collection: PublicationCollection});

});

HTML:

<body>
<ul id="displayHere"></ul>
</body>

模板:

<script id="publicationTemplate" type="text/template">
<td class="id"><%= id %></td>
<td class="title"><%= title %></td>
<td class="published"><%= published %></td>
</script>

最佳答案

我们来了

!DOCTYPE html>
<html lang="EN">
<head>
    <meta charset="UTF-8">
    <title>Help 7</title>
</head>
<body>
    <ul id="displayHere"></ul>
    <script id="publicationTemplate" type="text/template">
    <td class="title"><%= title %></td>
    <td class="published"><%= published %></td>
    </script>


<script src="js/jquery.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
<script>
$(function() {
/* The initialization of the models is correct, according to data json page you supply */
/* Model */
var Publication = Backbone.Model.extend({
    defaults: {
        title: "",
        published: ""
    }
});
/* They need to manipulate the data received since apparently come masked in the variable "news", this variable contains the main array with which it is     going to work. */
/* Collection */
var PublicationCollection = Backbone.Collection.extend({
    model: Publication,
    url: 'http://www.stellarbiotechnologies.com/media/press-releases/json',
    /*
    for this we will use the "parse" function that provides us backbone, which performs this function is handled in the manner in which the data received     before storing in the collection needed
    */
    parse: function(response){
        return response.news;
    }
});
/*
Here you must not set the item as "#displayHere"
*/
/* Model View */
var PublicationView = Backbone.View.extend({
    tagName: 'li',
    className: 'publication',
    template: _.template($('#publicationTemplate').html()),

    initialize: function() {
        this.model.on('destroy', this.remove, this);
    },

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

/* Collection View */
var AppView = Backbone.View.extend({
    /*
    this is where you establish your main item as "#displayHere"
    */
    el: '#displayHere',
    /*
    Here is a somewhat tricky part when receiving data from somewhere, and     it takes establish the way in which they will work and much depends on your     project, then what we'll do is add a listener to the collection, this means that     when you run the "fetch" this will execute the "sync" event which is to be this     outstanding.
    */
    initialize: function() {
        this.listenTo(this.collection, "sync", this.render);
    },

    render : function() {
        this.collection.each(this.add, this);
        return this;
    },

    add: function(newModel) {
        var pub = new PublicationView({model: newModel});
        this.$el.append(pub.render().el);
    },    
    /* Remove is not used until now */
    remove: function(pub) {
        var pubs = this.collection;
        pubs.remove(pub);
        pubs.render();
    }

});
/*
First we have to create a collection, you can not just send the constructor     PublicationCollection
*/
var AppPublicationCollection = new PublicationCollection();
/*
And created the collection, then we can send it
*/
var App = new AppView({collection: AppPublicationCollection});
/*
And finally we have to run the "fetch" function to send for data
*/
AppPublicationCollection.fetch();

});
</script>
</body>
</html>

关于javascript - Backbone.js Collection View 通过模型 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35049364/

24 4 0
文章推荐： php - 从 Shopify 商店卸载应用程序后，从 PHP 应用程序中删除商店详细信息
文章推荐： JavaScript - 显示数组的键和值
文章推荐： javascript - 计算一个数组中的单词在第二个数组中出现的次数
文章推荐： javascript - 如何获取模型中用户的经纬度
行者123
个人简介

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

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