emberjs中渲染和视图关键字的区别?

Posted

技术标签:

【中文标题】emberjs中渲染和视图关键字的区别?【英文标题】:Difference between render and view keyword in emberjs? 【发布时间】:2014-04-17 14:02:01 【问题描述】:

您什么时候使用render "viewGoesHere" contentview App.viewGoesHereView contentBinding="this"

我正在尝试动态更改单击侧栏菜单中的不同链接时要呈现的模板。但是上述两种方法只有在第一次单击链接(来自侧边栏)时才会更改为正确的模板。之后点击的任何链接都会生成与第一次生成的模板相同的模板。

tl;dr:单击侧栏中的不同链接时,我的模板不会动态更改。

这是我的看法:

App.ViewGoesHereView = Ember.View.extend(
    templateName: function()
        var templateName = 'baseTemplate';

        var value = this.get('controller.model.Name');

        if (Ember.compare(value, 'abc') === 0) 
            templateName = 'abcTemplate';
            return templateName;
        

        else if (Ember.compare(value, 'xyz') === 0) 
            templateName = 'xyzTemplate';
            return templateName;
        

        return templateName;

    .property('controller.model.Name'),

);

我基本上是根据当前模型中的名称获得正确的模板,并且我可以在 templateName 变量中获得正确的名称,但它不会呈现。

【问题讨论】:

@SamSelikoff view App.ContentItemView contentBinding="this" 我把我的工作代码放在下面。但我无法理解计算属性没有动态更新 value 变量? 【参考方案1】:

在您的代码示例中,您尝试将templateName 属性连接到controller.model.Name,正如您所说,这种方法第一次起作用,但余烬视图仅第一次使用templateName 属性。即如果 templateName 在视图渲染后发生变化,它不会重新渲染视图。如果您希望您的方法发挥作用,您将需要在每次依赖属性更改时重新渲染视图。

//sample
App.ViewGoesHereView = Ember.View.extend(
    templateName: function()
        var templateName = 'baseTemplate';

        var value = this.get('controller.model.Name');

        if (Ember.compare(value, 'abc') === 0) 
            templateName = 'abcTemplate';
            return templateName;
        

        else if (Ember.compare(value, 'xyz') === 0) 
            templateName = 'xyzTemplate';
            return templateName;
        

        return templateName;

    .property('controller.model.Name'),
    //new property to re-render the view
    reRenderView: function () 
        this.rerender();
    .observes('controller.model.Name')

);

注意:我没有测试过这段代码,因为我没有你的场景的完整用例。如果这不起作用,请恢复。

【讨论】:

【参考方案2】:

我意识到value ('controller.model.Name') 不会在每次点击侧边栏中的新链接时更新。所以我插入了一个 jquery 函数来在每次点击时获取更新的名称,并将其分配给 value 变量。

App.ViewGoesHereView = Ember.View.extend(
    templateName: function()
        var templateName = 'baseTemplate';

        var val = this.get('controller.model.Name');
        var value;

        $(document).ready(function () 
            $('li').click(function () 
                val = ($(this).text());
            );
        );

        value = val;

        if (Ember.compare(value, 'abc') === 0) 
            templateName = 'abcTemplate';
            return templateName;
        

        else if (Ember.compare(value, 'xyz') === 0) 
            templateName = 'xyzTemplate';
            return templateName;
        

        return templateName;

    .property('controller.model.Name'),

);

【讨论】:

以上是关于emberjs中渲染和视图关键字的区别?的主要内容,如果未能解决你的问题,请参考以下文章

渲染多个 EmberJS 视图时断言失败

EmberJS 从控制器加载视图而不是路由

EmberJS View - 检测是不是所有子视图都已呈现

Emberjs:从子视图中解析表单数据

angularjs如何在视图渲染结束之后,或者render之后执行指令中的link方法呢?

Emberjs - 一起使用 CollectionView 和 ItemController