Блог

У меня возникли некоторые трудности с XTemplates и использованием структуры MVC. Я просмотрел несколько руководств, и сами по себе они имеют смысл, но когда я пытаюсь применить их к тому, что я пытаюсь выполнить, это работает не так хорошо.

Во-первых, мое приложение состоит из TabBarMVC и нескольких представлений. Некоторые представления будут иметь «дополнительные представления». У меня приложение работает с точки зрения «макета». Вкладки являются вкладками, и представления могут получать доступ к вложенным представлениям. Теперь проблема заключается в отправке данных в подвиды.

Примером может служить страница моего счета на страницу сведений. На странице счета пользователь может ввести общее количество и количество людей, с которыми нужно разделить счет. Мой контроллер принимает оба параметра, разделяет их и сохраняет в объекте ‘guests’. Мой гостевой объект будет представлять собой массив из 1-кратного числа гостевых объектов. (в зависимости от числа, которое нужно разделить).

Затем я отправляю этот объект в метод обновления в моем вспомогательном представлении для обновления XTemplate, но этого не происходит. Я могу предупредить объект и просмотреть данные в отладчике, но я не знаю, как обновить Xtemplate.

Вот код контроллера:

 splitdetail: function(options)
{
    if ( ! this.splitdetailView)
    {
        var totalBill = options.data['totalBill'];
        var numGuests = options.data['splitBy'];

        var totalPerGuest = totalBill / numGuests;

        var guestObject = new Array();
        var theGuest;
        for (var i=0; i<numGuests; i  ) {
            theGuest = {amount: totalPerGuest}
            guestObject.push(theGuest);
        }

        app.views.calculatorSplitDetail.updateWithRecord(guestObject);

        this.splitdetailView = this.render({
            xtype: 'CalculatorSplitDetail',
            switchAnimation: { type: 'slide'}
        });
    }

    this.application.viewport.setActiveItem(this.splitdetailView, 'slide');
},
 

и вот моя разделенная деталь

 var guestTemplate = new Ext.XTemplate(
'<tpl for=".">',
    '<div class=" x-field guest-amount-row x-field-number x-label-align-left">',
        '<div class="x-form-label" style="width: 30%; ">',
            '<span>Total bill</span>',
        '</div>',
        '<div class="x-form-field-container">',
            '<input type="number" name="totalGuestAmount" class="x-input-number" value="{amount}">',
        '</div>',
    '</div>',
'</tpl>'
);


app.views.CalculatorSplitDetail = Ext.extend(Ext.form.FormPanel, {
    initComponent: function() {

    Ext.apply(this, {
        scroll: false,
        items: [
            guestTemplate,
            ]

    });

    app.views.CalculatorSplitDetail.superclass.initComponent.call(this);

},

styleHtmlContent: true,
baseCls: 'calculator-splitdetail-panel',

updateWithRecord: function(record) {

    guestTemplate.apply(record);
    alert(record[0].amount);      
}
});

Ext.reg('CalculatorSplitDetail', app.views.CalculatorSplitDetail);
 

guestTemplate это просто шаблон, а не элемент управления, поэтому он не может обновляться сам, но он может генерировать для вас новый html. Итак, все, что вам нужно сделать, это обновить вашу панель новым сгенерированным html:

 updateWithRecord: function(record) {
    this.update(guestTemplate.apply(record));
    alert(record[0].amount);      
}