Windows 8 metro JavaScript应用绑定到表

我在绑定JavaScript表格时遇到了问题，而不是绑定在模板中提供的html中，它将div放入负载并将json呈现为字符串。这是我有：Windows 8 metro JavaScript应用绑定到表

<tr id="tableRow" data-win-control="WinJS.Binding.Template"> 
    <td data-win-bind="innerText: label"></td> 
    <td data-win-bind="innerText: value"></td> 
    <td></td> 
</tr> 

<table> 
    <thead> 
     <tr> 
      <th>col1</th> 
      <th>col2</th> 
      <th>col3</th> 
     </tr> 
    </thead>  
    <tbody class="topContent" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></tbody> 
</table>

我使用绑定的JavaScript（topContent是{标签，值}对象的列表：

function bindContent() { 
    var list = new WinJS.Binding.List(); 

    topContent.forEach(function (item) { 
     list.push(item); 
    }); 

    var listView = document.querySelector(".topContent").winControl; 
    var template = document.getElementById("tableRow"); 
    listView.layout = new ui.ListLayout(); 
    listView.itemTemplate = template; 
    listView.itemDataSource = list.dataSource; 
}

来源

2012-06-19 Luke Lowrey

我在问题中既没有看到JavaScript也没有看到JSON，那真的是对的吗？（我没有做过“JavaScript metro app”，但名称中带有“JavaScript”一词......） –

@ T.J.Crowder更新为包含js的绑定。我倾向于相信这个问题是与我的模板，而不是js –

你检查发生了什么当你改变你的列表视图为div元素，并更改您的模板使用div？当你建立你的模板和表格时，我不清楚HTML是如何渲染的。 – ChristiaanV

您不能使用ListView这样该ListView控制增加了额外的元素的整个堆栈来完成其工作，这是造成你的表问题。

答案是直接使用WinJS.Binding.Template控件，并使用它将行插入到表元素中。这里是你所需要的模板中的HTML：

<table > 
    <tbody id="myTemplate" data-win-control="WinJS.Binding.Template"> 
     <tr > 
      <td data-win-bind="innerText: label"></td> 
      <td data-win-bind="innerText: value"></td> 
      <td></td> 
     </tr> 
    </tbody> 
</table>

你需要把一个完整的表格和tbody的标记，这样浏览器就没有不高兴寻找一个独立的TR元素或插入TBODY元素本身。模板的外部元素将被丢弃，因此只有在使用模板时才会从模板生成tr元素。

下面是表，其中生成的元素将被插入的标记 - 这是你有什么，除了我增加了一个id属性，所以我可以找到从JavaScript内容插入的元素：

<table> 
    <thead> 
     <tr> 
      <th>col1</th> 
      <th>col2</th> 
      <th>col2</th> 
     </tr> 
    </thead>  
    <tbody id="myTableBody"> 
    </tbody> 
</table>

最后，这里是代码：

WinJS.UI.processAll().then(function() { 
    var tableBody = document.getElementById("myTableBody"); 
    var template = document.getElementById("myTemplate").winControl; 

    topContent.forEach(function (item) { 
     template.render(item, tableBody); 
    }); 
});

你需要确保由WinJS.UI.processAll返回Promise使用模板之前得到满足。为每个要处理的项目调用render方法 - 参数是要传递给模板进行数据绑定的数据项以及将元素插入到的DOM元素。

来源

2012-06-19 18:26:39

认为它可能是这个。提示给任何有类似问题的人 - 如果你使用dom浏览器，你可以看到listview附带的额外标记 –

你叫里面的bindContent（）函数processAll（）的承诺吗？如果没有，请尝试以下，看看它是否工作。

WinJS.UI.processAll().then(function() { 
    bindContent(); 
};

来源

2012-06-19 09:32:56 Jatajuuf

Windows 8 metro JavaScript应用绑定到表

回答

相关问题