1

更新：Sushanthの回答で質問を更新しています--、コードが正常に実行されないという問題に直面しました[この引用「最新の更新」とその下の問題の後の質問のコードの最新の更新]

Backbone.js アプリケーションを開発していますが、サーバーからデータを取得することに行き詰まっています。

http://localhost:8888/client/i/schedule

この URL は、必要なデータの json 配列を表します。ここでの問題は、コレクションとモデルからこのデータをビューに読み取らせる方法です。

以下の 3 つのファイルがあります。

最初のものはビュー用です

// Filename: views/schedule
define([
'jquery',
'underscore',
'backbone',
'collections/schedule',
'text!templates/schedule.html'
], function($, _, Backbone, scheduleCollection, scheduleTemplate) {

var scheduleView = Backbone.View.extend({

    el: $(".app"),
    initialize: function() {},

    render: function() {             
        console.log('schedule view loaded successfully');
    }
});
return new scheduleView;
});

2枚目はコレクション用

// Filename: collections/schedule
define([
  'jquery',
  'underscore',
  'backbone',
  'models/schedule'
], function($, _, Backbone, ScheduleModel){
  var ScheduleCollection = Backbone.Collection.extend({
    model: ScheduleModel,
    initialize: function(){
        console.log('schedule collections loaded successfully');
    }
  });
  return new ScheduleCollection;
});

最初のものはモデル用です

// Filename: models/schedule
define([
  'underscore',
  'backbone',
  'config'
], function(_, Backbone, config) {
var ScheduleModel = Backbone.Model.extend({    
    urlRoot: "http://localhost:8888/client/i/schedule",    
    defaults: {
      feedback: 'N/A'
    },
    initialize: function(){
        console.log('schedule model loaded successfully');
    }
  });
  return ScheduleModel;

});

アップデート

ルーター

    var AppRouter = Backbone.Router.extend({
        routes: {
            // Define some URL routes
            'schedule': 'scheduleRoute',
            // Default
            '*actions': 'defaultRoute'
        },
        scheduleRoute: function() {

            scheduleView.render();
        },

)}

最新のアップデート

router.js

define([
    'jquery',    
    'underscore',
    'backbone',
    'app/views/dashboard',
    'app/views/schedule'
], function($, _, Backbone, dashboardView, scheduleView) {
    var AppRouter = Backbone.Router.extend({
        routes: {
            // Define some URL routes
            'schedule': 'scheduleRoute',
            // Default
            '*actions': 'defaultRoute'
        },
        scheduleRoute: function() {
            // Create a new instance of the collection
            // You need to set the url in the collection as well to hit the server
            var schedules = new Schedules();
            // Pass in the collection as the view expects it
            var scheduleView = new ScheduleView({
                collection: schedules
            });
           // No need of calling render here
           // as the render is hooked up to the reset event on collection          
        },
        defaultRoute: function(actions) {            
            // We have no matching route, lets display the home page
            dashboardView.render();
        }
    });

    var initialize = function() {                
        var app_router = new AppRouter;
        Backbone.history.start();
    };
    return {
        initialize: initialize
    };
});

スケジュール ビュー .js

// Filename: views/schedule
define([
    'jquery',
    'underscore',
    'backbone',
    'app/collections/schedule',
    'text!templates/schedule.html'
], function ($, _, Backbone, scheduleCollection, scheduleTemplate) {

    var scheduleView = Backbone.View.extend({
        collection: scheduleCollection,
        el: $(".app"),
        initialize: function () {
            // Listen to the reset event which would call render
            this.listenTo(this.collection, 'reset', this.render);
            // Fetch the collection that will populate the collection
            // with the response 
            this.collection.fetch();
        },
        render: function () {
            console.log('schedule view loaded successfully');  
            console.log(this.collection);
        }
    });
    return new scheduleView;
});

コレクション

// Filename: collections/schedule
define([
    'jquery',
    'underscore',
    'backbone',
    'app/models/schedule'
], function ($, _, Backbone, ScheduleModel) {
    var ScheduleCollection = Backbone.Collection.extend({
        model: ScheduleModel,
        url: "http://sam-client:8888/sam-client/i/schedule",
        initialize: function () {
            console.log('schedule collections loaded successfully');
        }
    });
    return ScheduleCollection;
});

スケジュールモデル

// Filename: models/schedule
define([
    'underscore',
    'backbone',
    'app/config'], function (_, Backbone, config) {
    var ScheduleModel = Backbone.Model.extend({
        // If you have any
        //idAttribute : 'someId'
        // You can leave this as is if you set the idAttribute
        // which would be apprnded directly to the url
        urlRoot: "http://sam-client:8888/sam-client/i/schedule",
        defaults: {
            feedback: 'N/A'
        },
        initialize: function () {
            console.log('schedule model loaded successfully');
        }
    });
    return ScheduleModel;

});

問題 のコードが期待どおりに実行されず、コンソールに以下のエラーが記録されます

Uncaught TypeError: Cannot read property '_listenerId' of undefined

答えを更新 すると、ScheduleView.js から値を返すことができないということでした

ビューのインスタンスを作成するとき、Backbone.js はコンストラクタ エラーではありません

4

1 に答える 1

1

reset問題のビューのコレクションでイベントをリッスンする必要があります。

次に、fetch を使用してリクエストを送信します。 

var scheduleView = Backbone.View.extend({

    el: $(".app"),
    initialize: function() {
       // Listen to the reset event which would call render
       this.listenTo(this.collection, 'reset', this.render);
       // Fetch the collection that will populate the collection
       // with the response 
       this.collection.fetch();
    },
    render: function() {             
        console.log('schedule view loaded successfully');
        console.log(this.collection)
    }
});

混乱を避けるために、モジュールからの新しいインスタンスではなく、バックボーン ビュー、モデル、またはコレクションを返します。

したがって、モジュールを定義するときに、新しいインスタンスを作成できます。

// Filename: views/schedule
define([
    'jquery',
    'underscore',
    'backbone',
    'collections/schedule',
    'text!templates/schedule.html'], function ($, _, Backbone, scheduleCollection, scheduleTemplate) {

    var scheduleView = Backbone.View.extend({

        el: $(".app"),
        initialize: function () {},

        render: function () {
            console.log('schedule view loaded successfully');
        }
    });
    return scheduleView;
    // Remove the returning of new module here
});

そして、ビューを依存関係として追加するモジュールで

// Create a new instance of the collection
// You need to set the url in the collection as well to hit the server
var schedules = new Schedules();

// Pass in the collection as the view expects it
var scheduleView = new ScheduleView({
    collection : 
})

アップデート

モデル

// Filename: models/schedule
define([
    'underscore',
    'backbone',
    'config'], function (_, Backbone, config) {
    var ScheduleModel = Backbone.Model.extend({
        // If you have any
        //idAttribute : 'someId'
        // You can leave this as is if you set the idAttribute
        // which would be apprnded directly to the url
        urlRoot: "http://localhost:8888/client/i/schedule",
        defaults: {
            feedback: 'N/A'
        },
        initialize: function () {
            console.log('schedule model loaded successfully');
        }
    });
    return ScheduleModel;

});

コレクション

// Filename: collections/schedule
define([
    'jquery',
    'underscore',
    'backbone',
    'models/schedule'], function ($, _, Backbone, ScheduleModel) {
    var ScheduleCollection = Backbone.Collection.extend({
        model: ScheduleModel,
        url: "http://localhost:8888/client/i/schedule",
        initialize: function () {
            console.log('schedule collections loaded successfully');
        }
    });
    return ScheduleCollection;
});

見る

// Filename: views/schedule
define([
    'jquery',
    'underscore',
    'backbone',
    'collections/schedule',
    'text!templates/schedule.html'], function ($, _, Backbone, scheduleCollection, scheduleTemplate) {

    var scheduleView = Backbone.View.extend({

        el: $(".app"),
        initialize: function () {
            // Listen to the reset event which would call render
            this.listenTo(this.collection, 'reset', this.render);
            // Fetch the collection that will populate the collection
            // with the response 
            this.collection.fetch();
        },
        render: function () {
            console.log('schedule view loaded successfully');
            console.log(this.collection)
        }
    });
});

他のモジュールでは、

レンダリングするビューが必要になります

ルーター

var AppRouter = Backbone.Router.extend({
    routes: {
        // Define some URL routes
        'schedule': 'scheduleRoute',
        // Default
        '*actions': 'defaultRoute'
    },
    scheduleRoute: function () {
        // Create a new instance of the collection
        // You need to set the url in the collection as well to hit the server
        var schedules = new Schedules();
        // Pass in the collection as the view expects it
        var scheduleView = new ScheduleView({
            collection: schedules
        });
       // No need of calling render here
       // as the render is hooked up to the reset event on collection 
    }
});
于 2013-08-23T20:28:41.980 に答える