Template_literals

Question

我正在使用6.5.1版本和现代工具包开发extjs项目，我有一个单例类来管理所有类似的翻译：

Ext.define('QApplication.Labels', {
   singleton: true,

   name: "Name",
   email: "Email",
   correctAnswer: "Correct Answer",
   button: 'My Button'
});

现在它位于主视图模型中：

Ext.define('QApplication.view.main.MainModel', {
  extend: 'Ext.app.ViewModel',

  alias: 'viewmodel.main',

  data: {
    i18n: QApplication.Labels,
  }
});

现在，我用自己的XTemplate定义了一个DataView，但是我必须使用单例类提供的一些翻译：

var qTpl = new Ext.XTemplate(
  "<div class=\"question-text\"><a \">{questionTitle}</a></div>",
  "<tpl if='totalAnswers &gt; 0'>",
    "<div class=\"question-answer-color\">{totalAnswers} {i18n.correctAnswer}
"<tpl else>",
    "<div class=\"question-answer-no-color\">Unanswered</div>",
"</tpl>",
);

  Ext.define('QApplication.view.quest.list', {
    extend: 'Ext.dataview.DataView',
    xtype: 'qList',
    requires: [
      'QApplication.store.QTier',
      'QApplication.view.main.MainModel'
    ],

    height: 'auto',

    controller: '////',
    viewModel: 'main',

    store: {
      type: '////'
    },

    itemTpl: qTpl
});

在XTemplate中，我定义了数据绑定{i18n.correctAnswer}，该数据绑定引用管理所有翻译的单例类，但是它不采用给定的值

Answer 1

您可以将alternateClassName用于singleton类，并且可以直接在数据视图itemTpl内部访问。在itemTpl内部，您可以使用Template_literals。

Template_literals

模板文字是允许嵌入表达式的字符串文字。您可以使用多行字符串和字符串插值功能。在ES2015规范的先前版本中，它们被称为“模板字符串”。

您可以通过运行 FIDDLE 进行检查。

代码片段

//JS code 
Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('QApplication.Labels', {
            singleton: true,

            alternateClassName:'i18n',

            name: "Name",
            email: "Email",
            correctAnswer: "Correct Answer",
            button: 'My Button'
        });

        Ext.define('MainStore', {

            extend: 'Ext.data.Store',

            alias: 'store.mainstore',

            fields: ['questionTitle', 'totalAnswers'],

            data: [{
                totalAnswers: 10,
                questionTitle: 'Use Singleton class in XTemplate - DataView'
            }, {
                totalAnswers: 5,
                questionTitle: 'How to get dom element in ES6'
            }, {
                totalAnswers: 0,
                questionTitle: 'Why does `viewmodel.getStore()` return null'
            }]
        });

        Ext.define('QApplication.view.main.MainModel', {

            extend: 'Ext.app.ViewModel',

            alias: 'viewmodel.main',

            stores: {
                mainStore: {
                    type: 'mainstore'
                }
            }
        });

        var qTpl = new Ext.XTemplate(
            `<div class="question-text"> <a>{questionTitle}</a> </div>
            <tpl if="totalAnswers &gt; 0">
            <div class="question-answer-color">{totalAnswers} ${i18n.correctAnswer}</div>
            <tpl else>
            <div class="question-answer-no-color">0 Unanswered</div>
            </tpl>`
        );

        Ext.define('QApplication.view.quest.list', {

            extend: 'Ext.dataview.DataView',

            xtype: 'qList',

            cls:'my-data-view',

            viewModel: 'main',

            bind: '{mainStore}',

            itemTpl: qTpl
        });

        Ext.create({
            xtype: 'qList',
            fullscreen: true,
        })

    }
});

//CSS code
<style>
    .my-data-view .x-dataview-item {
        padding: 10px;
        border-bottom: 1px dashed #ccc;
        background-color: wheat;
        font-size: 16px;
        cursor: pointer;
    }

    .question-answer-color {
        color: green;
        text-decoration: underline;
    }

    .question-answer-no-color {
        color: red;
        text-decoration: underline;
    }

</style>

在XTemplate中使用Singleton类-DataView

1 个答案:

Template_literals