如何使用 tpl 配置将 json 数据绑定到屏幕？

Question

我正在研究 Sencha 的 Admin Dashboard 示例并尝试自定义“Weather”面板。

我用 OpenWeatherMap 的 Current weather data API 创建了 JSON 格式 url。我无法使用 tpl 配置将 JSON 数据绑定到天气面板。我已经创建了一个 ViewModel 并在 Component 中调用了它，但效果不佳。

这里是组件 class;

Ext.define('OWeb.view.dashboard.Weather', {
    extend: 'Ext.Component',
    xtype: 'weather',

    baseCls: 'weather-panel',
    border: false,
    height: 80,

    store: {
        proxy: {
            type: 'ajax',
            url: 'http://api.openweathermap.org/data/2.5/weather?q=Antalya,TR&appid=9b59049894d42af608baf69f869b9ace&units=metric',
            reader: {
                type: 'json'
            }
        },
        autoLoad: true
    },

    tpl: '<div class="weather-image-container"><img src="resources/img/{icon}" alt="{weather.description}"/></div>'+
         '<div class="weather-details-container">' +
            '<div>{main.temp}&#176;</div>' +
            '<div>{weather.main}</div>' +
         '</div>'
});

这是 link JSON 数据，returns 通过 OpenWeatherMap 和代码片段；

{
     "coord": {
         "lon": 30.72,
         "lat": 36.77
     },
     "weather": [{
         "id": 800,
         "main": "Clear",
         "description": "clear sky",
         "icon": "01d"
     }],
     "base": "stations",
     "main": {
         "temp": 25,
         "pressure": 1015,
         "humidity": 23,
         "temp_min": 25,
         "temp_max": 25
     },
     "visibility": 10000,
     "wind": {
         "speed": 5.7,
         "deg": 320
     },
     "clouds": {
         "all": 0
     },
     "dt": 1507184400,
     "sys": {
         "type": 1,
         "id": 6028,
         "message": 0.0025,
         "country": "TR",
         "sunrise": 1507175759,
         "sunset": 1507217657
     },
     "id": 323776,
     "name": "Antalya",
     "cod": 200
 }

谢谢，欢迎任何建议。

更新

我找到了 this post 并且我尝试了同样的事情；从 Ext.DataView 扩展，设置代理类型 jsonp 并使用 itemTpl 配置。现在我可以绑定到 JSON 数据但只能显示 {main.temp}。有什么想法吗？

Ext.define('OWeb.view.dashboard.Weather', {
    //extend: 'Ext.Component',
    extend: 'Ext.DataView',
    xtype: 'weather',

    baseCls: 'weather-panel',
    border: false,
    height: 80,

    store: {
        proxy: {
            type: 'jsonp',
            url: 'http://api.openweathermap.org/data/2.5/weather?q=Antalya,TR&appid=9b59049894d42af608baf69f869b9ace&units=metric',
            reader: {
                type: 'json'
            }
        },
        autoLoad: true
    },

    itemTpl: '<div class="weather-image-container"><img src="{weather.icon}" alt="{weather.description}"/></div>'+
         '<div class="weather-details-container">' +
            '<div>{main.temp}&#176;</div>' +
            '<div>{weather.description}</div>' +
         '</div>'
});

Answer 1

请查看以下几点以了解这一点。

Ext.Component class 不适用于商店，因为您的代码无法正常工作。您可以在别处创建商店，然后从商店检索数据并将组件的 data 属性设置为它。（请注意，对于 Ext.Component，tpl 属性与 data 属性一起使用：

var 数据 = store.getData();

component.setData(数据);
jsonP 仅当您需要从不同域获取数据时才需要代理。
如果您在商店中获取数据，那么更好的选择是从 Ext.DataView 扩展您的 class，因为它适用于商店。
这些值没有正确显示在模板中，因为 weather 属性是一个对象数组，我们需要像 weather[0].icon.因此，为此，模型需要正确映射的字段。（查看 mapping 属性。）
我已经为您的代码创建了一个 Fiddle。图片未显示，因为 url 未返回任何图片。休息是工作。希望这对你有帮助。

如何使用 tpl 配置将 json 数据绑定到屏幕？

How to bind json data to screen with tpl config?

data-binding

rest

json

extjs

openweathermap