EmberJSビュー内にプログラムでリンクを作成する

Question

レンダリングにかなり複雑なビューがありますが、これには再帰があります（通常のフォルダ/ファイルネストリスト）。異種のオブジェクト（フォルダやファイル）が含まれているため、Handlebarsテンプレートを作成するのがさらに難しくなります。

私が見つけた唯一の解決策は、ビューを作成し、レンダリングバッファを手動で満たすことです。私は以下のソリューションに付属している：

今

App.LibraryContentList = Ember.View.extend({ 
    tagName: 'ol', 
    classNames: ['project-list', 'dd-list'], 

    nameChanged: function() { 
    this.rerender(); 
    }.observes('content.@each.name'), 

    render: function(buffer) { 
    // We only start with depth of zero 
    var content = this.get('content').filterProperty('depth', 0); 

    content.forEach(function(item) { 
     this.renderItem(buffer, item); 
    }, this); 
    }, 

    renderItem: function(buffer, item) { 
    switch (item.constructor.toString()) { 
     case 'App.Folder': 
     this.renderFolder(buffer, item); 
     break; 
     case 'App.File': 
     this.renderFile(buffer, item); 
     break; 
    } 
    }, 

    renderFolder: function(buffer, folder) { 
    buffer.push('<li class="folder dd-item">'); 
    buffer.push('<span class="dd-handle">' + folder.get('name') + '</span>'); 

    // Merge sub folders and files, and sort them by sort order 
    var content = this.mergeAndSort(); 

    if (content.get('length') > 0) { 
     buffer.push('<ol>'); 

     content.forEach(function(item) { 
     this.renderItem(buffer, item); 
     }, this); 

     buffer.push('</ol>'); 
    } 

    buffer.push('</li>'); 
    }, 

    renderFile: function(buffer, album) { 
    buffer.push('<li class="album dd-item">'); 
    buffer.push('<span class="dd-handle">' + file.get('name') + '</span>'); 
    buffer.push('</li>'); 
    } 
}); 

、私が希望する各フォルダ及び各ファイルはクリック可能になるようにリンクを追加し、別のルートにリダイレクトすることができることです。しかし、私はリンクにアクセスすることができないので、私はそれをやろうとしています。ヘルパー？私はLinkViewビューで試してみましたが、成功しませんでした。各アイテムに手動でハンドラーを登録する必要がありますか？

代わりにCollectionViewを使用してコンテンツを分割し、コンテンツを深さで分割してテンプレートを使用してレンダリングすることも考えましたが、もっと複雑に思えます。

どのような考えですか？

Answer 1

linkToヘルパーがこのアプローチに最適な方法ではない可能性があります。 linkToはすべてrouter.transitionToであり、必要に応じて動的に解決するパスと、自動active CSSプロパティの設定があります。

あなたの場合は、すでにアイテムリストがあるので、クリックしたアイテムはビュー自体からアクセスできます。したがって、ヘルパーを介して動的にまたは暗黙的にLinkViewを作成すると、クリックされた項目を処理する必要はない場合があります。

古いアイテムのアンカーにold-skool data-some-idを直接設定します。次に、ビューハンドルでクリックを計算し、対応するアイテムをdataset.someIdに、次にtransitionToRouteをビューに直接、またはコントローラー上のgotoItemを使用して計算します。

このようなアイテムが多数ある場合、DOM要素数とEmberビューの数が大幅に節約されます。

私はこれをjsbinの同様の設定で試しました。テンプレートでProductsListViewを使用しましたが、そのアプローチはプログラム例のViewと似ています。