javascript - 更新我对 Backbone 模型变化的看法

Question

我是 backbone 的新手，我正在通过使用包含数据的 json 文件制作一些博客来练习它。一切正常(好吧，这可能是大多数时候不好的做法)但是我想补充一件事。我想在我的模型更改时更新我的​​ View 。我想我必须用听众或类似的东西来做，但我不确定并尝试了很多我在 stackoverflow 上发现的不同的东西。

这是我的代码:

项目( Backbone 模型)

var Item = Backbone.Model.extend({
    defaults: {
        titel: 'Titel niet opgegeven',
        url_titel: 'unieke sleutel urltitel',
        img_path: 'geen image toegevoegd',
        commentaar: 'Commentaar niet opgegeven',
        categorie: 'Categorie niet opgegeven',
        waardering: 0,
        artikel: 'Artikel niet opgegeven'
    },
});

ItemCollection( Backbone 收藏)

var ItemCollection = Backbone.Collection.extend({
    model: Item,
    comparator: function(model) {
        if (sortid == "waardering") {
            return -model.get(sortid); //sorteert desc
        } else {
            return model.get(sortid); //sorteert asc
        }
    }
});

ItemShelfView(主干 View )

var ItemShelfView = Backbone.View.extend({
    className: 'itemshelf',
    tagName: 'div',


    render: function() {
        var self = this;

        // iterate through each item in the collection
        // and add it to the dom
        this.collection.each(function(item) {

            // create item dom node
            var itemEl = $('<div />', {
                class: "item well well-lg col-md-5"
            });
            var itemTitel = $('<h3 />').text(item.get('titel')).attr('class', "col-md-12");

            var itemLink = $('<a />').attr('href', '#detail/' + item.get('url_titel')).attr('class', "btn btn-default navigate col-md-12").text('Bekijk het volledige artikel');

            var itemAfbeelding = $('<img />').attr('src', item.get('img_path')).attr('class', " thumbnail col-md-4 ");

            var artikeltekst = item.get('artikel');
            var shortText = jQuery.trim(artikeltekst).substring(0, 200).split(" ").slice(0, -1).join(" ") + "...";

            var itemArtikel = $('<p />').text(shortText).attr('class', "col-md-8");
            var itemCategorie = $('<span />').text(item.get('categorie')).attr('class', "col-md-8");
            var itemWaardering = $('<b class="waardering" />').text(item.get('waardering')).attr('class', "col-md-8");
            var itemCommentaar = $('<span />').text(item.get('commentaar')).attr('class', "col-md-8");




            // bad practise
            itemEl.append(itemTitel);
            itemEl.append(itemAfbeelding);
            itemEl.append(itemArtikel);
            itemEl.append(itemLink);
            itemEl.append(itemCommentaar);
            itemEl.append(itemCategorie);
            itemEl.append(itemWaardering);


            // append the fragment to this views root el
            self.$el.append(itemEl);
        });
        return this;
    }
});

我的ajax获取json数据

$.ajax({
    url: 'api/items.json',
    dataType: 'json',
    success: function(data) {
        console.log(data);

        var items = new ItemCollection(data);
        var shelf = new ItemShelfView({
            collection: items
        });

        $('#app').append(shelf.render().$el);

        // ensure we can edit the items
        window.items = items;
        window.shelf = shelf;
    }
});

谢谢! (我已经看过很多关于 stackoverflow 的主题。)天哪!

Answer 1

您似乎只想在单个模型更改时重新渲染该模型的 View ，而不是整个集合。您可以为每个模型创建一个 View 来做到这一点。 (您当前的 View 是您的收藏。)

获取您的 collection.each 中的代码而不是在那里进行所有渲染，而是为每个集合创建一个新 View ，它将只负责渲染与一个模型关联的元素。

现在，由于每个模型都有一个 View ，您可以通过执行 this.model.on('change', this.render, this) 在其自己的 View 中监听模型的变化。 .伪代码如下:

ItemShelfView()
   render:
      this.collection.each( function(m) {(
        var mview = new modelView({model: m}) //make a new modelView and pass it a model
      );}

modelView()
    initialize:
      this.model.on('change', this.render, this); //re-renders the model if it's changed
    render:
      // put the rendering code here
      //(the stuff that was previously in the each loop in the collection view)

我推荐这个教程:http://arturadib.com/hello-backbonejs/ .它以非常缓慢的速度进行，并朝着我认为您正在尝试做的事情努力(渲染模型集合；如果模型发生变化，则重新渲染模型)