0

さて、jsonファイルからのデータを2つの別々のビュー/コレクションで表示しようとして、少し狂っています。

ここにコード全体を貼り付けて、今どこにいて、何をする必要があるかを説明しようとします。それはおそらく非常に小さなことであり、それを機能させるために必要なことですが、見ることができません..

これは、私のページが現在どのように見えるかのスクリーンショットです。データがロードされていることがわかりますが、ビューに正しく取得できません..

ここに画像の説明を入力

私の Collection クラスでは、parse を呼び出します。

parse:function(response, options) {
   return options.parseField ? response[options.parseField] : response;
},

私は同期を呼び出します：（まったく必要かどうかはわかりません）

sync: function(method, model, options) {
options.contentType = "application/json";
options.cache = false;
options.dataType = "json";
return Backbone.sync(method, model, options);
},

次に、2 つの新しいコレクションを作成し、fetch を使用して、各コレクションに必要な特定の json データを次のように取得します。

var links = new App.Collections.Links();
links.fetch({
  parseField: 'links_1',
  success: function () {
    console.log(links.toJSON());
            return links.toJSON();
  }
});

var links2 = new App.Collections.Links();
links2.fetch({
  parseField: 'links_2',
  success: function () {
    console.log(links2.toJSON());
            return links2.toJSON();
  }
});

console.log を実行すると、json データが正常にロードされていることがわかりますが、レンダリングされていませんか?

ここで何が間違っているのですか..

デバッグと理解のために、js ファイル全体を以下に含めました。

(function() {

// Helper functions

// Defining namespacing rules
window.App = {
    Models: {},
    Collections: {},
    Views: {}
};

// Setting global template function, for simpel declaration later on by setting template('name'); for the built in template function.
window.template = function(id) {
    return _.template( $('.' + id).html() );
};


// Capitalize first letter in a link by adding .capitalize(); to the string.
String.prototype.capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
};

// Extending Backbone 

//Modellen
App.Models.Link = Backbone.Model.extend({
    defaults: {
        navn : 'i haz a name!',
        link : 'http://www.lolcats.com/',
        counter : 0
    }
});


//Collection
App.Collections.Links = Backbone.Collection.extend({ 

    model: App.Models.Link,
    url: 'data1.json',

    parse:function(response, options) {
        return options.parseField ? response[options.parseField] : response;
    },

    sync: function(method, model, options) {
        options.contentType = "application/json";
        options.cache = false;
        options.dataType = "json";
        return Backbone.sync(method, model, options);
    },

    // Sort the models 'highest first'
    comparator: function(link) {
    return -link.get('counter');
    }       
});


//Singel view
App.Views.LinkView = Backbone.View.extend({
    tagnavn: 'li',

    template: template('Links'),

    initialize: function() {
        this.model.on('change', this.render, this);
        this.model.on('destroy', this.remove, this);
    },

    events: {
    'click .edit' : 'retLink',
    'click .delete' : 'destroy',
    'click .LinkUrl' : 'addCounter'
    },

    retLink: function() {
        var newLinkNavn = prompt('What should the new name be?', this.model.get('navn'));

        if ( !newLinkNavn ) return;

        newLinkNavn = newLinkNavn.capitalize();
        this.model.set('navn', newLinkNavn);


        var newLinkUrl = prompt('What should the new url be?', this.model.get('link'));
        if ( !newLinkUrl ) return;
        this.model.set('link', newLinkUrl);
    },      

    destroy: function() {
        this.model.destroy();

    },

    // Increment the counter then user clicks it
    addCounter: function(e) {
        e.preventDefault();
        var newCounter = this.model.get('counter');
        this.model.set('counter', newCounter + 1);
    },

    remove: function() {
        this.$el.remove();
    },

    render: function()  {
        this.$el.html(this.template(this.model.toJSON()) );
        return this;
    }
});

//Collection View
App.Views.LinksView = Backbone.View.extend({
    tagName: 'ul',
    className: 'liste',

    initialize: function() {
        _.bindAll(this);
        this.collection.on('add', this.addOne, this);
        this.collection.on('reset', this.render);

        // Render view when a user has changed a model          
        this.collection.bind('change', this.render, this); 

        $('.navnClass').focus();
        this.load();
        this.render();

    },

    load: function() {
        this.collection.fetch({
          add: true,
          success: this.loadCompleteHandler,
          error: this.errorHandler
        });     
    },

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

    errorHandler : function(){
        throw "Error loading JSON file";
    },

    render: function() {
        // Empty the UL before populating it with the new models and sorting it.
        this.$el.empty();
        this.collection.sort();

        this.collection.each(this.addOne, this);
        return this;
    },

    addOne: function(link) {
        var linkView = new App.Views.LinkView({ model: link });
        this.$el.append(linkView.render().el);
    }
});

// Create link view 
App.Views.AddLink = Backbone.View.extend({
    el: '#addLink',

    events: {
        'submit' : 'submit'
    },

    submit: function(e) {
        e.preventDefault();
        var linkNavn = $(e.currentTarget).find('.navnClass').val(),
             linkNum =  $(e.currentTarget).find('.linkClass').val();



        // Tildel link navn en værdi, hvis det er tomt   
        if ( ! $.trim(linkNavn)) {
                linkNavn = 'I haz a name!';
        }

        // Tildel link url en værdi, hvis det er tomt    
        if( ! $.trim(linkNum)) {
                linkNum = 'http://www.lolcats.com/';
        }

        // Tilføj http:// foran værdi, hvis den ikke indeholder det i forvejen.
        if( linkNum.indexOf( "http://" ) == -1 ) {
             addedValue = 'http://',
             linkNum = addedValue + linkNum;
        }

        // nulstil og sæt fokus på link navn feltet.
        $(e.currentTarget).find('.navnClass').val('').focus();
        $(e.currentTarget).find('.linkClass').val('');
        this.collection.add({ navn:linkNavn, link: linkNum });
    }

});


// new links collection
// populate collection from external JSON file
// change navn to match the link heading

var links = new App.Collections.Links();
links.fetch({
  parseField: 'links_1',
  success: function () {
    console.log(links.toJSON());
            return links.toJSON();
  }
});

var links2 = new App.Collections.Links();
links2.fetch({
  parseField: 'links_2',
  success: function () {
    console.log(links2.toJSON());
            return links2.toJSON();
  }
}); 


// new collection view (add)
var addLinkView = new App.Views.AddLink({ collection: links });

// new collection view
var linksView = new App.Views.LinksView({ collection: links });
$('.links').html(linksView.el);

// new collection view
var linksView2 = new App.Views.LinksView({ collection: links2 });
$('.links2').html(linksView2.el);   


})();
4

1 に答える 1

0

これを試していただけますか：

var links2 = new App.Collections.Links();
links2.on("reset", function(collection){
   console.log("reset event", collection);
}
links2.fetch({
  parseField: 'links_2',
  wait:true, #wait for the server to respond
  success: function (collection, response) {
    console.log(collection, response);
  }
});

成功呼び出しでのリターンは何もしません ($.ajax オブジェクトに返されます)。クライアント側の検証に合格すると、successcall が即座に呼び出されるため、待機を追加しました (何もないため、常に最初に成功が呼び出されます)。

あなたはそれが何もレンダリングしないと言います。しかし、何かをレンダリングするにはビューが必要です。コードにビューが表示されません。

ビューの簡単な例を次に示します。

var Link = new Backbone.View.extends({
    el: $('body'),
    initialize: function(){
       this.listenTo(this.collection, 'reset', this.render, this)
    },
    render: function(){
     this.$el.empty();
     this.collection.each(function(item){
        this.$el.append(item.get('id') + '<br />');
     });

    }
})
var view = new Link({collection: links2});
于 2013-02-15T09:40:33.480 に答える