更新我对骨干模型变化的看法

Question

我是骨干网的新手，我正在练习它，通过使用包含数据的 json 文件制作一些博客。一切正常（好吧，这可能是大多数时候不好的做法），但我想补充一件事。当我的模型发生变化时，我想更新我的视图。 我想我必须用一个监听器或类似的东西来做，但我不确定并尝试了很多我在 stackoverflow 上找到的不同的东西。

这是我的代码：

项目（骨干模型）

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（主干集合）

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（主干视图）

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

您似乎只想在单个模型更改时重新渲染该模型的视图，而不是整个集合。您可以为每个模型创建一个视图。 （您当前的视图供您收藏。）

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

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

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/。 它的速度非常缓慢，并且朝着我认为您正在尝试做的事情努力（渲染模型集合；如果模型发生变化，则重新渲染模型）