Question

我已经创建了一个新的骨干应用程序，我想知道如果我使用当前使用骨干的方式，当模型发生变化时我如何更新我的视图。我已经写了一个listenTo函数，但我没有错误，也不知道它是否更新。我也想尝试排序。示例对标题进行排序，并按照正确的顺序对视图进行排序。

这是我的代码，感谢您的帮助！

var url;
var Artikel = Backbone.Model.extend({
  urlRoot: 'api/items.json',
  defaults: {
        id: '',
        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'
    },
    initialize: function(){

      if(!this.get('description')){
        var lazy = 'This user was too lazy too add a description';
        this.set('description', lazy);
      }
    }
});


 var Artikels = Backbone.Collection.extend({
  model: Artikel,
   sortAttribute: "categorie",
   sortDirection: 1,

   sortArtikels: function (attr) {
      this.sortAttribute = attr;
      this.sort();
   },

   comparator: function(a, b) {
      var a = a.get(this.sortAttribute),
          b = b.get(this.sortAttribute);

      if (a == b) return 0;

      if (this.sortDirection == 1) {
         return a > b ? 1 : -1;
      } else {
         return a < b ? 1 : -1;
      }
   },
  url: 'api/items.json'
});


var ArtikelLijst = Backbone.View.extend({
  el: '#app',

  initialize: function(){

    this.listenTo(artikel, 'all', this.render); //how do i test this, is this correct? (no errors)

  },
  render: function(){
    this.render;

    var that = this;
    var artikels = new Artikels();

    artikels.fetch({
      success:function(artikels){

        artikels.toJSON();
        var template = _.template($('#artikel-overzicht-template').html(), {artikels: artikels.models});
        that.$el.html(template);
      }
    });
  }
});

var artikelLijst


var ArtikelDetail = Backbone.View.extend({
  el: '#app',

  // events:{
  //   'submit .form' : 'saveArtikel'
  // },
  // saveArtikel: function (ev){

  //   var artikelDetails = $(ev.currentTarget).serializeObject();
  //   var artikel = new Artikels();

  //   artikel.save(artikelDetails, {
  //     succes: function(artikel){
  //       router.navigate('', {trigger: true});
  //     }
  //     })
  //     return false;

  // },
  render: function(options){

    var that = this;
    var artikel = new Artikels();
    url = options.id;
    artikel.fetch({
      success: function(artikel,options)
      {
        var vindartikel = artikel.where({url_titel: url});
        var artikelcol = Backbone.Collection.extend({
            model:Artikels
        });
        var specifiekArtikel = new artikelcol(vindartikel);
        var template = _.template($('#detail-edit-template').html(),{specifiekArtikel:specifiekArtikel.models});
        that.$el.html(template);
      }
     });

  }
});


var artikel = new Artikels();
var artikelLijst = new ArtikelLijst({model: Artikels});
var artikelDetail = new ArtikelDetail();


console.log(artikel); // this gives empty array? how can i test if the view updates when the model is changed?

var Router = Backbone.Router.extend({

    routes: {
      "": "home",
      "detail/:id": "detail"
    },

    home: function() {
      artikelLijst.render();
    },

    detail: function(id) {
        artikelDetail.render({id: id});
    }

  });

//init router
var router = new Router();
Backbone.history.start();

我尝试了不同的aproches，但仍然没有让它工作

Answer 1

此行中的artikel变量：

this.listenTo(artikel, 'all', this.render);

是指任何变量，是全局变量吗？

尝试这样做：

this.model.bind('change', this.render)

Backbone js中没有来自eventListener的反应

1 个答案: