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（Backbone Collection）

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上查看过很多主题。） Grtz！

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

使用骨干更新我对模型更改的看法

1 个答案: