Используйте класс Singleton в XTemplate - DataView - PullRequest
Новая
       31

Используйте класс Singleton в XTemplate - DataView

0 голосов
/ 28 августа 2018

Я занимаюсь разработкой проекта extjs с использованием версии 6.5.1 и современного инструментария, у меня есть одноэлементный класс, который управляет всеми переводами примерно так: 

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,
  }
});

Теперь я определяю DataView с его собственным XTemplate, но мне нужно использовать некоторые переводы, предоставленные синглтон-классом: 

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}, которая ссылается на одноэлементный класс, который управляет всеми переводами, но он не принимает заданное значение

1 Ответ

0 голосов
/ 29 августа 2018

Вы можете использовать alternateClassName для своего singleton класса, и вы можете получить прямой доступ к представлению данных itemTpl. Внутри itemTpl вы можете использовать Template_literals.

Template_literals

Шаблонные литералы - это строковые литералы, допускающие встроенные выражения. Вы можете использовать многострочные строки и функции интерполяции строк. В предыдущих выпусках спецификации ES2015 они назывались «шаблонными строками».

Можно проверить с рабочим FIDDLE .

КОД SNIPPET 

//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>
...