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

Question

我正在研究Sencha的Admin Dashboard样品并试图定制'天气'面板。

我已经使用OpenWeatherMap的Current weather data API创建了JSON格式的网址。我无法通过tpl配置将JSON数据绑定到Weather面板。我已经创建了一个ViewModel并在Component中调用它，但它没有工作。

这里是组件类;

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用于经由OpenWeatherMap和片断返回JSON数据;

{ 
"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 
} 

谢谢，任何建议是值得欢迎的。

---

UPDATE

我发现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

请看下面的要点来理解这一点。

1. Ext.Component类不适用于商店，因为您的代码无法正常工作。您可以在其他地方创建商店，然后从商店检索数据，并将该组件的data属性设置为它。 （请注意，Ext.Component的tpl财产与data物业工作：

   VAR数据= store.getData（）;

   component.setData（数据）;只有当你需要

2. jsonP代理需要从不同的域中获取数据

3. 如果您在商店获取数据，那么更好的选择是从Ext.DataView扩展您的课程，因为它可以与商店配合使用。

4. 该值未在模板中正确显示，因为天气属性是一组对象，我们需要类似weather[0].icon的东西。所以对于这一点，模型是必需的，正确映射了字段。（请查看mapping属性。）

5. 我已为您的代码创建了一个Fiddle。图片没有显示，因为url没有返回任何图片。休息正在工作。希望这对你有帮助。