locked
How can I set an id or add a new class in a template for Windows 8 App with JS?

    Question

  • I'm developing an App for Windows Store but in some of the items I need a specific change for example a double height or a double width this is the normal code:

        <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"></h4>
                    <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
                </div>
            </div>
        </div>
    
    And I don't know how to add a new class or an id because this is my data.js code:
            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 }
    	];
    
    I have this new option importancia wich one told me the new class or id, this one I will modifiy their height or width with CSS. What can I do?

    Federico Navarrete

    Friday, December 28, 2012 12:10 AM

Answers

All replies

  • Hi,

    First, you could find the default css in the reference. And then you could define some new style, and override the default.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Friday, December 28, 2012 6:02 AM
  • I can't modify the default.css because I need to modify one specific item not all of them this is why I need to add an id or a new class to the template.

    Federico Navarrete


    • Edited by FANMixco Friday, December 28, 2012 8:07 AM error
    Friday, December 28, 2012 8:06 AM
  • Hi,

    Yes, you can't modify the default.css. My mean, you could define the same style in html page, and override the default.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Friday, December 28, 2012 8:09 AM
  • It's the same problem I could define a new css but I can't modify a specific ITEM to modify that ITEM I must to have an ID or a Class more specific an ID because and ID is unique, and in the CSS I could write for example:

    #top{
    width:510px;
    }

    And this is how is going to change but if I can't add a new id to this part of the code:

    <div class="item">
    I can't do anything like that
    <div class="item" data-win-bind="className: Importancia">
    Rewrite me the class and not give me a new one this is why I want to know how can I add a new class? or how can I set an Id?

    Federico Navarrete

    Friday, December 28, 2012 9:18 AM
  • Hi,

    I suggest you do that as I said as above. And don't using  an ID to do that.

    Please also refer to this thread: http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/f2276347-1eb5-4e7f-b4f4-21e672bc1e8d/ .


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    • Edited by Song Tian Friday, January 04, 2013 6:31 AM
    • Marked as answer by Song Tian Friday, January 04, 2013 6:31 AM
    Monday, December 31, 2012 1:56 AM