0

自分用の簡単なポートフォリオ サイトを作成して、Backbone.js の使用を開始しました。現時点ではあまり機能がありませんが、ライブラリに慣れてきたら、さらに追加したいと考えています。json を使用して、すべてのポートフォリオ アイテムを一覧表示するか、ルートに応じてそのうちの 1 つを表示するサイトのデータを入力しています。ポートフォリオ アイテムのリストが動作/表示されていますが、特定のルート (/#projects/2 など) のアイテムを 1 つだけ表示するのに苦労しています。ここで助けが必要です。

バックボーンの学習を開始し、さまざまなボイラープレートとチュートリアルを見てきましたが、どれも大きな助けにはなりませんでした。

これらのルートで、私はこれが起こることを望みます:

  1. / - ポートフォリオ アイテムのリスト
  2. /#projects - ポートフォリオ アイテムのリスト
  3. /#projects/3 - 1 つのポートフォリオ アイテム

JSbin に試してみましたが、json を適切にロードする方法がわからないため、うまくいきません...

モデルではなくコレクションにすべてのアイテムをロードしているため、問題が発生することは確かです。そうですか？

  1. どうすればこれを機能させることができますか？
  2. どうすればこれを改善できますか?

[編集 - - - - - - - - - - ]

以下のピーターの親切な助けの後、私はまだ援助を必要としています. 彼は言った：

ビューには 1 つのモデルが表示され、コレクション ビューにはモデルごとに 1 つのビューのリストが表示されます。

では、json データから 1 つのアイテムを表示するビューを作成し、コレクション ビューを作成してそれらすべてを表示するにはどうすればよいでしょうか。私が尋ねる理由は、私はそれらすべてを問題なく返品できるためですが、単一のアイテムを返品するのは非常に難しいことがわかっています..

コード例も更新しました: http://jsbin.com/asezul/8/edit

[ - - - - - - - - - - -編集]

 

さらに情報が必要な場合はお知らせください。私は Backbone を初めて使用するので、質問に答えるのに役立つ重要な部分を見逃している可能性があります。

以下はコードの抜粋ですが、JSbin でコードを表示することをお勧めします。

モデル:

SITE.Project = Backbone.Model.extend({
    initialize: function() {
        console.log(this, this.attributes.name);
    }
});

コレクション：

SITE.Projects = Backbone.Collection.extend({
    model: SITE.Project,
    url: 'content.json',
    parse: function(response) {
        console.log(response);
        return response.portfolio;
    }
});

ビュー:

SITE.ProjectsView = Backbone.View.extend({
    el: '#main',
    initialize: function() {
        _.bindAll(this, 'render');
        // create a collection
        this.collection = new SITE.Projects();
        // Fetch the collection and call render() method
        var that = this;
        this.collection.fetch({
            success: function () {
                that.render();
            }
        });
    },
    template: SITE.helpers.template('project-list'),
    render: function() {
        $(this.el).html(this.template({ projects: this.collection.toJSON() }));
    }
});

ルーター:

SITE.Router = Backbone.Router.extend({
    initialize: function() {
        this.el = $('#main');
    },
    routes: {
        "": "index",
        "projects": "projects",
        "projects/:id": "project"
    },

    // Homepage / List of projects
    index: function() {
        var view = new SITE.ProjectsView();
    },

    // List of projects
    projects: function() {
        var view = new SITE.ProjectsView();
    },

    // Individual Project
    project: function(id) {
        var view = new SITE.ProjectView();
        console.log("You are trying to reach project " + id);
    }
});
4

1 に答える 1

1

したがって、データは実際には動的ではないため、プロジェクト コレクションが絶えず変化する動的アプリケーションと比較して、少しごまかすことができます。アプリの起動時に一度だけプロジェクト コレクションをロードし、そこからロードされたコレクションとモデルをページの残りの部分で使用します。

SITE.Router = Backbone.Router.extend({
    initialize: function() {
        //Router's don't have a this.el
        //this.el = $('#main');
        this.projects = new SITE.Projects();
    },
    routes: {
        "": "index",
        "projects": "projects",
        "projects/:id": "project"
    },

    // Homepage / List of projects
    index: function() {
        var view = new SITE.ProjectsView({collection: this.projects});
        if (this.projects.isEmpty()) {
            this.projects.fetch({success: function () {
                view.render();
            }});
        } else {
            view.render();
        }
    },

    // List of projects
    projects: function() {
        var view = new SITE.ProjectsView({collection: this.projects}).render();
    },

    // Individual Project
    project: function(id) {
        var view = new SITE.ProjectView({model: this.projects.get(id)}).render();
    }
});

次に、ビューをよりシンプル/愚かに保ちます。ビューは、コンストラクター/初期化のオプション引数でモデル/コレクションを受け入れる必要があります。それを試してみて、それが機能するかどうかを確認してください。それ以外の場合、コードは、対応するビュー コードを自分で変更できるように見えるので、読者の演習として残しておきます。

于 2012-12-31T15:36:56.027 に答える