javascript - 在 Bound Helper 中为模板设置正确的上下文

Question

我需要有关此代码的一些帮助:

View Setting up the Grid Helper
-------------------------------

App.OrdersTableView = Em.View.extend({
    templateName: 'account/orders/table',

    grid: App.HelperGrid.extend({

        meta: [
            {
                'name': 'id',
                'text': 'Number',
                'cellCallback': function(content, model){

                    // Uncaught Error: assertion failed: Cannot call get with 'id' on an undefined object. 
                    // return '{{#linkTo orders.view model}}' + content + '{{/linkTo}}';

                    // Renders an empty column
                    // return '{{#with model}}{{#linkTo orders.view model}}' + content + '{{/linkTo}}{{/with}}';

                    // Will render a link, linking to /account
                    return '{{#linkTo account}}' + content + '{{/linkTo}}';
                }
            },
            {
                'name': 'shortDate',
                'text': 'Date'
            },
            {
                'name': 'orderedBy',
                'text': 'Ordered By',
                'cellCallback': function(content){
                    return '{{view rangeView}}';
                }
            },
            {
                'name': 'orderTotalOneTimeAmount',
                'text': 'One-Time Total',
                'cellCallback': function(content){
                    return '$' + parseFloat(content).toFixed(2);
                }
            },
            {
                'name': 'orderTotalRecurringAmount',
                'text': 'Monthly Total',
                'cellCallback': function(content){
                    return '$' + parseFloat(content).toFixed(2);
                }
            },
            {
                'name': 'status',
                'text': 'Status'
            }
        ]
    })
});




DataGrid Helper Template
------------------------

<div class="row">
    <div class="span12">
        <div class="row">
            {{view view.rangeView}}
            {{view view.countView}}
            {{view view.pagerView}}
        </div>
        <div class="row">
            <div class="span12">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            {{#each meta in view.meta}}
                                {{view view.headerView propertyNameBinding="meta.name" labelBinding="meta.text"}} 
                            {{/each}}
                        </tr>
                    </thead>
                    <tbody>
                        {{#each order in controller}}
                            {{gridRow view order view.meta}}
                        {{/each}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


gridRow Bound Handlebars Helper
-------------------------------

// I'm aware that I'm appending 'td' child views but returning a '<tr></tr>' string for display.  This is not the problem at hand and will be fixed.


/**
 * Grid Row bound helper
 * 
 * Used to render a table row in a datagrid.
 * 
 * @param {Object} context Ember.View reference
 * @param {Object} model DS.Model containing data for specific row
 * @param {Object} properties Meta data to render data cells
 * @return {String} HTML to render table row
 */
Ember.Handlebars.registerBoundHelper( 'gridRow', function(context, model, meta) {

    var options = [].slice.call(arguments, -1)[0],
        view = options.data.view,
        returnValue = '';

    returnValue += '<tr>';
    for ( var i=0, j=meta.length; i<j; i++ ) {

        var content = Ember.Handlebars.Utils.escapeExpression( model.get(meta[i].name) ),
            template = ( undefined !== meta[i].cellCallback ) ? meta[i].cellCallback( content, model, context ) : content;

        var childView = view.createChildView(Ember.View, {
            tagName: 'td',
            context: context, //Ember.get(view, 'context'),
            template: Ember.Handlebars.compile(template)
        });

        view.appendChild(childView);
    }
    returnValue += '</tr>';

    return new Ember.Handlebars.SafeString(returnValue);
});

我正在努力制作一个可分页的数据网格助手，我已经成功地做到了。

但是，我正在尝试为每个数据单元格的呈现添加回调支持，其中模板选项仍将受到尊重，例如 {{view ranger}}、{{#linkTo}} 等。

我对 {{view}} 和 {{#linkTo}} 工作有基本支持，但当我尝试链接到特定记录时，我遇到了上下文问题。

在顶部 View 中第一个元属性的回调代码中，您可以看到我正在尝试的三个不同的返回语句(并且还有其他变体)以及它们返回的各种错误。

该部分是我试图解决的具体问题。

我可以解释任何人需要理解我的方法的任何内容。

更新 1

如果我使用 return '{{#with context}}{{#linkToorders.view model}}' + content + '{{/linkTo}}{{/with}}'; 我能够在列中直观地呈现链接，并使用正确的路径，但使用 undefined 代替 id 应该在 url 中的位置。

Answer 1

所以我终于弄清楚了，正如我一直怀疑的那样，答案与上下文有关。我将第一个 meta.cellCallback 定义中的模板定义更改为:

return '{{#linkTo orders.view this}}' + content + '{{/linkTo}}';

然后我必须适本地设置所创建 View 的上下文，因此我将其更改为:

    var childView = view.createChildView(Ember.View, {
        tagName: 'td',
        context: ( -1 === template.indexOf('{{#linkTo') ) ? context : model,
        template: Ember.Handlebars.compile(template)
    });

通过这种方式，{{#linkTo}} 帮助器的上下文被设置为预期的单个模型，而对于其他帮助器，它们具有父 View 的上下文。