1

バックボーンに単純なアプリがあり、ロジックが明確ではありません。これは 2 番目のアプリであり、ロジックが適切かどうか、どのように構築したかがわかりません。
目標は、ページをロードするときに、特定のディレクトリのすべてのフォルダーとファイルを取得して印刷することです。
Folderという別のアプリを含むアプリジェネラルを作成しました。ページをロードすると、一般的なアプリを作成し、フォルダー内を検索し、フォルダーとファイルを ajax 関数を使用して json に取得します。
私はそれを成功させましたが、私の問題は、FolderView、FolderModel、およびFolder Collectionをどのように設定するかです? そうする必要があると思いますが、このjsonをFolderCollection/FOlderModelに渡す方法がわかりません。

これは私のappViewです

define(['jquery' , 'backbone', 'views/folder', 'models/folder', 'collections/folder', 'models/app'], 
    function($, Backbone, FolderView, FolderModel, FolderCollection, AppModel){
    var AppView = Backbone.View.extend({
        model: AppModel,
        el:$('#folder'),

        initialize: function(){
            console.log('initialize AppView');
            this.retrievFolderFile('uploads');
            //prendo le cartelle e le metto nel json

            this.folders = new FolderCollection();
            this.render();
            //this.todos.bind('sync', this.render, this);
            //this.todos.fetch();
        },
        render: function(){
            var element = this.$el;
            element.html('');
            this.folders.each(function(model){
                var folderView = new FolderView({model:model});

                element.append(folderView.el);
            });
        },
        retrievFolderFile: function(dir){
            var here = this;
            console.log('retrieveFolderFile');
            $.ajax({
                type: "POST",
                dataType: "json",
                data: {"dir": dir},
                url: 'function/retrieve_folder.php',
                success: function(data) {
                    console.log(data);
// ------------------ HERE I HAVE RESULT HOW TO PASS TO FOLDER VIEW/ COLLECTION?------
                }
            });
        }
    })

    return AppView;
});

これは私のフォルダーモデルです

define(['backbone'],function(Backbone){
    var FolderModel = Backbone.Model.extend({
        defaults:{
            name:'Folder',
            path:''
        },
        initialize:function(){
            console.log('Initialized Folder model');
        }
    });

    return FolderModel;
});

これは私のFolderCollectionです

define(['backbone', 'models/folder'], function(Backbone, FolderModel){

    var folderCollection = Backbone.Collection.extend({
        model: FolderModel,
    });

    return folderCollection;
});

これは私のFolderViewです

define(['jquery', 'underscore', 'backbone', 'text!templates/folder.html'], function($, _, Backbone, FolderTemplate){
    var FolderView = Backbone.View.extend({
        el:$('#folder'),
        template: _.template(FolderTemplate),

        initialize: function(){
            console.log('FolderView initialized');
            this.render();
        },
        render: function(){
            console.log('FolderView render');

            //$(this.el).html(this.template({model: this.options.model}));
        }
    });

    return FolderView;
});

フォルダーとファイルを取得するには、このファイル PHP を使用して、有効な json をバックボーンに返します

<?php
$dir = $_POST['dir'];
$data = fillArrayWithFileNodes( new DirectoryIterator( '../'.$dir ) );

function fillArrayWithFileNodes( DirectoryIterator $dir )
{
  $data = array();
  foreach ( $dir as $node )
  {
    if ( $node->isDir() && !$node->isDot() )
    {
        //$data[$node->getFilename()] = fillArrayWithFileNodes( new DirectoryIterator( $node->getPathname() ) );
        $arr_to_insert = array();
        $arr_to_insert['name'] = $node->getFilename();
        $arr_to_insert['type'] = 'folder';
        array_push($data, $arr_to_insert);
    }
    else if ( $node->isFile() )
    {
      //$data[] = $node->getFilename();
        $arr_to_insert = array();
        $arr_to_insert['name'] = $node->getFilename();
        $arr_to_insert['type'] = 'file';
        array_push($data, $arr_to_insert);
    }
  }
  return $data;
}
echo json_encode($data);
?>

私を返すjsonをappviewから渡す方法は? appview内でfolderand filde検索を行うのは正しいですか、それともfolderModel内で行う必要がありますか? フォルダーをクリックした後、そのファイルとフォルダーを再度取得したいからです。ロジックとそれを渡す方法を理解するのを手伝ってください。parseFolderFile のような FolderCollection 内の関数を呼び出してモデルに挿入することを考えましたが、どのように?

ありがとう

4

1 に答える 1

1

AJAX非同期です..したがって、ajax呼び出しを行ってから、コレクションを反復処理してレンダリングするrenderメソッドを呼び出しています。

しかし、あなたのデータは、成功したコールバックまで準備ができていません。コレクションにデータが入力されると思います。したがって、成功のコールバック内にコレクションを設定してから、render を呼び出す必要があります。

これらの行の何か

initialize: function () {
    console.log('initialize AppView');
    this.folders = new FolderCollection();
    this.retrievFolderFile('uploads');
},
render: function () {
    var element = this.$el;
    element.html('');
    this.folders.each(function (model) {
        var folderView = new FolderView({
            model: model
        });
        element.append(folderView.el);
    });
},
retrievFolderFile: function (dir) {
    var here = this;
    console.log('retrieveFolderFile');
    $.ajax({
        type: "POST",
        dataType: "json",
        data: {
            "dir": dir
        },
        url: 'function/retrieve_folder.php',
        success: function (data) {
            console.log(data);
            here.folders.set(data);
            here.render();
        }
    });
}

また、バックボーンによって提供されるネイティブなものが既にある ajax リクエストを処理する必要があるのはなぜですか。

urlコレクション内で doを宣言してから、または resent イベントをthis.folders.fetch()リッスンすることができます。これにより、私の見解ではよりクリーンになります。sync

ネイティブ Fetch の使用

define(['jquery', 'backbone', 'views/folder', 'models/folder',
                             'collections/folder', 'models/app'],

function ($, Backbone, FolderView, FolderModel,
                                FolderCollection, AppModel) {
    var AppView = Backbone.View.extend({
        model: AppModel,
        el: $('#folder'),

        initialize: function () {
            this.folders = new FolderCollection();
            // This will automatically call the render once the 
            // collection is reset 
            this.listenTo(this.folders, 'reset', this.render);
            this.folders.data = 'uploads';
            this.folders.fetch();
        },
        render: function () {
            var element = this.$el;
            element.html('');
            this.folders.each(function (model) {
                var folderView = new FolderView({
                    model: model
                });

                element.append(folderView.el);
            });
        }
    })

    return AppView;
});

define(['backbone', 'models/folder'], function(Backbone, FolderModel){

    var folderCollection = Backbone.Collection.extend({
        model: FolderModel,
        url : 'function/retrieve_folder.php' + this.data;
    });

    return folderCollection;
});
于 2013-07-20T18:31:32.047 に答える