数据绑定 – WinJS ListView和模板绑定
所以我试图通过模板显示来自JSON请求的一些数据.数据有一些与此类似的嵌套对象(数量不等):
data: "Some data",nested: [ { nested_data: "foo",bar: "foobar" },... ],... 我设法解析JSON并将其存储在WinJS.Binding.List对象中,并将结果绑定到模板.我遇到的问题实际上是在我的模板中显示嵌套的JSON数据.模板看起来像这样: <div class="appTemplate"> <div class="innerTemplate"> <h1 data-win-bind="innerText: data"> <h2 data-win-bind="innerText: nested"> </div> </div> 当我运行那些程序时,模板的’嵌套’部分只是一堆[object Object]而不是我想要显示的数据. 有什么方法可以创建模板,以便它可以处理嵌套数据?定义模板函数会更容易吗?不知道该怎么办……
没有内置的方法可以做到这一点 – 列表视图是迭代数据的唯一内置控件.但是,您无法嵌套列表视图.
根据您的预期结果,有两种方法可以解决此问题: 1)对嵌套数据进行字符串化:您可以通过编写将您的数据数组转换为单个字符串值的WinJS.Binding.converter来完成此操作.例 码: WinJS.Namespace.define("Examples.Converters",{ nestedDataConverter: WinJS.Binding.converter(function(input) { // Assume input is array var result = ""; input.forEach(function(data) { result += data.nested_data + "," + bar + ";"; }); result result; }),}); 模板: 我推荐的解决方案是构建你自己的控件,它将获取你的数组(或WinJS.Binding.List)并创建所需的元素/布局.我在我工作的项目中完成了这项工作,而且非常简单. 示例模板: <div class="appTemplate" data-win-control="WinJS.Binding.Template"> <div class="innerTemplate"> <h1 data-win-bind="innerText: data"> <h2 data-win-bind="innerText: nested Examples.Converters.nestedDataConverter"> </div> </div> 现在,h2将具有该数据的单字符串版本. 2)创建一个控件来丰富地显示数据:为此,您需要创建一个新的WinJS控件并在模板中使用它. 控制示例: WinJS.Namespace.define("Examples.Controls",{ Stamper: WinJS.Class.define(function(element,options) { WinJS.UI.setOptions(this,options); this.domElement = element; },{ domElement: nullm _data: null,data: { set: function(val) { this._data = val; updateLayout(); } },updateLayout: function() { this.domElement.innerHTML = ""; if(!this._data) { return; } this._data.forEach(function(item) { var el = document.createElement("div"); el.textContent = "Data: " + item.nested_data + "," + item.bar; this.domElement.appendChild(el); }.bind(this)); } }),}); 模板: <div class="appTemplate" data-win-control="WinJS.Binding.Template"> <div class="innerTemplate"> <h1 data-win-bind="innerText: data"></h1> <div data-win-control="Examples.Controls.Stamper" data-win-bind="winControl.data: nested"></div> </div> </div> 可以扩展此控件以呈现嵌套模板和其他项.这都是你想要获得多么复杂的问题. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- windows-server-2008-r2 – Windows任务计划程序:由于超时
- Windows上Jenkins的git插件不使用带子模块的凭据
- Win10常用快捷键
- vbscript – 如何使用Windows脚本以安全模式重新启动计算机
- windows – Flaky Connection中的大型文件复制工具
- 创建一个Windows 10映像以用作docker容器
- windows10 自动配置切换IP
- 适用于Windows上任务关键型远程备份的良好rsync-with-versi
- Windows Phone 8 – Phonegap条码扫描器不识别Windows手机上
- Window丢失api-ms-win-crt-runtime-l1-1-0.dll
- 是否可以在heroku平台上运行Windows服务/应用程序
- 在Windows中没有回车符(CR)的情况下将新行打印到
- Windows server 2012 r2对计算机的网络速度限制在
- active-directory – Hyper-V和AD – >小站点的建
- 如何确定接口是否是Windows PC上的物理LAN端口?
- windows-server-2008 – 我可以为某项服务禁用Wi
- windows-phone-8 – 项目需要先部署才能启动
- 使用Microsoft Azure机器学习查看rgl图
- window下强制杀死某个进程用taskkill /pid 进程号
- Windows:在部署到Amazon Beanstalk之前设置PHP文