javascript - Sencha 触摸 2 : Populating one DataView using multiple stores

Question

我意识到这听起来可能很愚蠢，所以希望这不会给人留下太愚蠢的印象。我想使用多个商店来填充一个 DataView 或我可以应用 itemTpl 的其他项目。我有一个要实现的基本想法:

• 我有一个用户和元素商店，用户可以购买元素。
• 每个用户都有一个关联的余额，该余额决定了他们可以购买哪些商品。

我希望能够显示可以购买的项目列表(无论用户的帐户中是否有足够的钱)。用户买不起的任何元素都应显示为灰色(但仍然可见)。

正如您从上面的图片中看到的，第一个用户可以看到所有元素而没有任何东西变灰(因为他们有足够的余额)，但是第二个用户没有足够的钱来购买盔甲。有什么方法可以从两个独立的商店(ItemStore 和 UserStore)中获取信息以列出所有项目，但将用户没有足够的项目灰显。

下面是我的代码:

(数据 View )ItemSelectionScreen:

Ext.define("touchstore.view.purchase.ItemSelectionScreen", {
    extend: 'Ext.dataview.DataView',
    xtype: 'item-selection',

    config: {
        store: 'ItemStore',
        itemTpl: new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="item {canAfford}">', //canAfford should be that the users balance is greater than the price of the item
                    '<h1>{itemName}</h1>',
                    '<span>{description}</span><br />',
                    '<div class="cost"><strong>Cost: {cost}</strong></div>',
                '</div>',
            '</tpl>')
    }
});

元素模型:

Ext.define('touchstore.model.ItemModel', {    
    extend: 'Ext.data.Model',

    config: {
        fields: [
            { name: 'itemName', type: 'string' },
            { name: 'description', type: 'string' },
            { name: 'cost', type: 'int' }
        ]
    }
});

元素商店:

Ext.define("touchstore.store.ItemStore", {
    extend: 'Ext.data.Store',

    config: {
        model: 'touchstore.model.ItemModel',
        data: [
            { itemName: 'Sword', description: 'Battle your enemies fiercely with this beautiful, yet deadly sword.', cost: 500 },
            { itemName: 'Armour', description: 'Defend yourself from attacks with this beautifully crafted piece of armour.', cost: 1400 },
            { itemName: 'Leather Boots', description: 'Run faster with these lightweight yet stylish boots.', cost: 400 }
        ]
    }
});

用户模型:

Ext.define("touchstore.model.UserModel", {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            { name: 'username', type: 'string' },
            { name: 'balance', type: 'int' }
        ]
    }
});

用户存储:

Ext.define("touchstore.store.UserStore", {
    extend: 'Ext.data.Store',

    config: {
        model: 'touchstore.model.UserModel',
        data: [
            { username: 'steve.smith', balance: 2000 },
            { username: 'robert.junior', balance: 500 }
        ]
    }
});

Answer 1

假设一次只有一个用户处于事件状态，您不需要创建另一个商店，您可以显示 ItemStore 中的所有商品，并仅根据当前事件用户和商品价格计算 {canAfford}。

您可以使用 XTemplate 的最后一个参数来传递一个对象，该对象具有可以计算 canAfford 的方法。大致是这样的:

new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="item {[this.canAfford(values)]}">', //canAfford should be that the users balance is greater than the price of the item
                '<h1>{itemName}</h1>',
                '<span>{description}</span><br />',
                '<div class="cost"><strong>Cost: {cost}</strong></div>',
            '</div>',
        '</tpl>',
        {
            canAfford: function(item) {
                return item.get('cost') <= CURRENT_USER.get('balance') 
                    ? 'CLASS-FOR-CAN-AFFORD' : 'CLASS-FOR-CANNOT-AFFORD';
            }
        })

CURRENT_USER 是对系统上当前事件用户的引用。通常，这将来自登录子系统。假设您使用返回当前登录用户的 getActiveUser 方法实现了 LoginController，它可能是这样的 (Ext JS):

touchstore.getApplication().getController('LoginController').getActiveUser()

如果使用 Sencha Touch，它将是:

touchstore.app.getController('LoginController').getActiveUser()

编辑:

另一种选择是使用 View 中的配置来传递当前用户。您认为的相关变化:

Ext.define("touchstore.view.purchase.ItemSelectionScreen", {
    ...

    config: {
        currentUser: null,

        // Empty template so there will be no errors. 
        // The real template is configured in the initialize method.
        itemTpl: '',
        ...
    },
    ...
    updateCurrentUser: function(newUser) {
       this.refresh();
    },

    // Setup the template in the initialize method. The initConfig is
    // probably better for this, but I could not test it.
    initialize: function() {
        var me = this;
        // The template is configured here so it can access me.getCurrentUser().
        me.setItemTpl(new Ext.XTemplate(...));
        me.callParent(arguments);
    }
});

如果您的 Controller 没有实例化 View ，它可以在 View 的初始化事件和/或当前用户更改时初始化此值。