0

我正在使用 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}，它引用了管理所有翻译的单例类，但它不采用给定值

4

1 回答 1

0

您可以alternateClassName用于您的singleton课程，您可以直接访问数据视图内部itemTpl。在itemTpl你里面可以使用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>
于 2018-08-29T05:03:58.260 回答