2012-12-27 22 views
2

我有一個很大的麻煩和W8的模板:如何在data-win-bind中設置ID?

<div class="itemtemplate" data-win-control="WinJS.Binding.Template"> 
    <div class="item"> 
     <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" /> 
     <div class="item-overlay"> 
      <h4 class="item-title" data-win-bind="textContent: title" style="margin-left: 0px; margin-right: 291.08px;"></h4> 
      <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6> 
     </div> 
    </div> 
</div> 

但一些項目,我需要他們有不同的外觀和我需要添加它們的ID例如這個代碼是在數據中。 JS:

 var sampleItems = [ 
     { group: sampleGroups[0], importancia: "top", title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray }, 
     { group: sampleGroups[0], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: darkGray }, 
     { group: sampleGroups[0], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: mediumGray }, 
     { group: sampleGroups[0], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: darkGray }, 
     { group: sampleGroups[0], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: mediumGray }]; 

如何添加的ID?因爲選項importancia決定我哪一個有標識。

+1

可能重複[如何設置在WinJS.Binding.Template的ID在Win8的應用程序(http://stackoverflow.com/questions/13620411/how-do-i-set-the- ID功能於winjs結合模板-IN-A-win8的應用程序內) –

回答

2

我用dynamic template bindingid屬性賦值爲ListView項。雖然,請注意,在@DominicHopton指出的「潛在重複」中,您可能不想將id指定給您的項目。

function listViewItemTemplate(item) { 
    // data has has information about each item 
    var data = item.data._value; 

    var itemElement = document.createElement('div'); 
    if (data.shouldHaveId) { // check whatever condition that you need 
     itemElement.id = data.id; // assign an id to your element 
    } 

    ... 

    return {element: itemElement} 
} 

... 

// Then you can assign the template to your listview 
youListViewControl.itemTemplate = listViewItemTemplate;