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

Posted 2023-02-26

【中文标题】emberjs中渲染和视图关键字的区别？

【英文标题】：Difference between render and view keyword in emberjs?

【发布时间】：2014-04-17 14:02:01

【问题描述】：

您什么时候使用render "viewGoesHere" content 和view 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'),

);