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

我是主干网新手，我正在通过使用包含数据的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'
    },
});

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
        }
    }
});

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;
    }
});

项目集合（主干集合）

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'
    },
});

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
        }
    }
});

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;
    }
});

itemshellfview（主干视图）

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'
    },
});

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
        }
    }
});

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;
    }
});

谢谢大家!！（我已经看过许多关于stackoverflow的主题。）

---

格茨

如果某个模型发生更改，您似乎只想重新渲染该模型的视图，而不是整个集合。可以通过为每个模型创建视图来实现这一点。（当前视图用于收藏。）

在

集合中获取代码。每个

不在那里进行所有渲染，而是为每个集合创建一个新视图，该视图只负责渲染与一个模型关联的元素

现在，由于每个模型都有一个视图，您可以通过执行

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)

我推荐本教程：。

---

它的运行速度非常慢，并朝着我认为您正在尝试的方向发展（渲染一组模型；如果模型发生变化，则重新渲染模型）

非常感谢您，本教程非常有用，但您的解释对我帮助最大，我现在对我所做的有了更多的了解。再次感谢：）