locked
[WinJS]Toggleswitch labeloff localization in binding template RRS feed

  • Question

  • Hi,

    I'm trying to localize a toggleswitch labelOff and labelOn property inside a binding template like this:

    <div id="switchTemplate" data-win-control="WinJS.Binding.Template">
                        <div class="flex-item">
                            <div class="w3-card-4 w3-indigo w3-padding-large" style="padding: 10px;">
                                <div class="w3-row">
                                    <p>
                                        <i class="fa fa-lightbulb-o"></i>
                                        <span class="w3-large uppercase" data-win-bind="innerText: name"></span>
                                    </p>
                                </div>
                                <div class="w3-row">
                                    <div class="switch" data-win-control="WinJS.UI.ToggleSwitch" data-win-bind="winControl.checked: status homecontroller.convertStatusToTrueFalse; alt: id;" data-win-res="{ winControl: { labelOff: 'Off', labelOn: 'On' } }"></div>
                                </div>
                                <div class="w3-row">
                                    <input class="dimmer" type="range" data-win-bind="value: dimlevel; alt: id; hidden: type homecontroller.convertTypeToTrueFalse" />
                                </div>
                            </div>
                        </div>
                    </div>

    But this code generates this exception:

    0x800a138f - JavaScript runtime error: Unable to set property 'labelOff' of undefined or null reference

    Outside the binding template the same toggleswitch localization code works fine ?


    • Edited by Krunal Parekh Tuesday, November 24, 2015 6:46 AM subject
    Sunday, November 22, 2015 10:45 PM

Answers

  • Hello Robby,

    You could set them in the javascript and then call the WinJS.ProcessAll method. Create Resource files for your languages and then get the string using WinJS.Resources.getString function. (all the article that I read are using textContent property in the data-win-res and some say that is the only supported for now. I tested using data-win-res in html but did not work so I suspect that might be true.)

    Please see:

    // For an introduction to the Blank template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232509
    (function () {
    	"use strict";
    
    	var app = WinJS.Application;
    	var activation = Windows.ApplicationModel.Activation;
    
    	app.onactivated = function (args) {
    		if (args.detail.kind === activation.ActivationKind.launch) {
    			if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
    				// TODO: This application has been newly launched. Initialize your application here.
    			} else {
    				// TODO: This application was suspended and then terminated.
    				// To create a smooth user experience, restore application state here so that it looks like the app never stopped running.
    			}
    
    			var datawinoptions = switchbtn.attributes.getNamedItem('data-win-options');
    			var offvalue = WinJS.Resources.getString('off');
    			var onvalue = WinJS.Resources.getString('on');
    			datawinoptions.value = "{  labelOff: '" + offvalue.value + "', labelOn: '" + onvalue.value + "'  }"
    
    			args.setPromise(WinJS.UI.processAll());
    		}
    	};
    
    	app.oncheckpoint = function (args) {
    		// TODO: This application is about to be suspended. Save any state that needs to persist across suspensions here.
    		// You might use the WinJS.Application.sessionState object, which is automatically saved and restored across suspension.
    		// If you need to complete an asynchronous operation before your application is suspended, call args.setPromise().
    	};
    
    	app.start();
    })();
    

    HTML

    	<div id="switchTemplate" data-win-control="WinJS.Binding.Template">
    		<span data-win-bind="innerText: name"></span>
    		<div id="switchbtn" class="switch" data-win-control="WinJS.UI.ToggleSwitch" data-win-bind="winControl.checked: status" data-win-options=""></div>
    	</div>

    With Regards,

    Krunal Parekh


    Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Proposed as answer by Krunal Parekh Wednesday, November 25, 2015 1:40 AM
    • Marked as answer by RobbyCeyssens Wednesday, November 25, 2015 9:56 PM
    Tuesday, November 24, 2015 9:12 AM

All replies

  • Hello Robby Ceyssens,

    You need to use data-win-options. Please see: ToggleSwitch.labelOn property

    Here is a simplified solution.

    data.js

    (function () {
    	var itemArray = [
    					{ name: "Marvelous Mint",status : false },
    					{ name: "Succulent Strawberry", status: false },
    					{ name: "Banana Blast", status: false },
    					{ name: "Lavish Lemon Ice", status: false },
    					{ name: "Creamy Orange", status: true},
    					{ name: "Very Vanilla", status: true },
    					{ name: "Banana Blast", status: true},
    					{ name: "Lavish Lemon Ice", status: true}
    	];
    
    	var items = [];
    
    	// Generate 160 items
    	for (var i = 0; i < 20; i++) {
    		itemArray.forEach(function (item) {
    			items.push(item);
    		});
    	}
    
    
    	WinJS.Namespace.define("Sample.ListView", {
    		data: new WinJS.Binding.List(items)
    	});
    
    })();
    

    default.html

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8" />
    	<title>ToggleSwitch</title>
    
    	<!-- WinJS references -->
    	<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
    	<script src="WinJS/js/base.js"></script>
    	<script src="WinJS/js/ui.js"></script>
    
    	<!-- ToggleSwitch references -->
    	<link href="/css/default.css" rel="stylesheet" />
    	<script src="js/data.js"></script>
    	<script src="/js/default.js"></script>
    </head>
    <body class="win-type-body">
    	<div id="switchTemplate" data-win-control="WinJS.Binding.Template">
    		<span data-win-bind="innerText: name"></span>
    		<div class="switch" data-win-control="WinJS.UI.ToggleSwitch" data-win-bind="winControl.checked: status" data-win-options="{  labelOff: 'its Off', labelOn: ' its On'  }"></div>
    	</div>
    
    	<!-- The declarative markup necesary for ListView instantiation -->
    	<!-- Call WinJS.UI.processAll() in your initialization code -->
    	<div id="listView"
    			 class="win-selectionstylefilled"
    			 data-win-control="WinJS.UI.ListView"
    			 data-win-options="{
                itemDataSource: Sample.ListView.data.dataSource,
                itemTemplate: select('#switchTemplate'),
                selectionMode: 'none',
                tapBehavior: 'none',
                layout: { type: WinJS.UI.ListLayout }
        }">
    	</div>
    
    
    </body>
    </html>
    

    Result

    With Regards,

    Krunal Parekh


    Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Proposed as answer by Krunal Parekh Tuesday, November 24, 2015 7:22 AM
    Tuesday, November 24, 2015 7:22 AM
  • Hi Krunal Parekh,

    Thanks for the answer but this doesn't answer my question. I want to localize the labelOff and labelOn property (translate the property value according to the user language). The language values are defined in a language resource file.

    Thx

    Robby

    Tuesday, November 24, 2015 8:01 AM
  • Hello Robby,

    You could set them in the javascript and then call the WinJS.ProcessAll method. Create Resource files for your languages and then get the string using WinJS.Resources.getString function. (all the article that I read are using textContent property in the data-win-res and some say that is the only supported for now. I tested using data-win-res in html but did not work so I suspect that might be true.)

    Please see:

    // For an introduction to the Blank template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232509
    (function () {
    	"use strict";
    
    	var app = WinJS.Application;
    	var activation = Windows.ApplicationModel.Activation;
    
    	app.onactivated = function (args) {
    		if (args.detail.kind === activation.ActivationKind.launch) {
    			if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
    				// TODO: This application has been newly launched. Initialize your application here.
    			} else {
    				// TODO: This application was suspended and then terminated.
    				// To create a smooth user experience, restore application state here so that it looks like the app never stopped running.
    			}
    
    			var datawinoptions = switchbtn.attributes.getNamedItem('data-win-options');
    			var offvalue = WinJS.Resources.getString('off');
    			var onvalue = WinJS.Resources.getString('on');
    			datawinoptions.value = "{  labelOff: '" + offvalue.value + "', labelOn: '" + onvalue.value + "'  }"
    
    			args.setPromise(WinJS.UI.processAll());
    		}
    	};
    
    	app.oncheckpoint = function (args) {
    		// TODO: This application is about to be suspended. Save any state that needs to persist across suspensions here.
    		// You might use the WinJS.Application.sessionState object, which is automatically saved and restored across suspension.
    		// If you need to complete an asynchronous operation before your application is suspended, call args.setPromise().
    	};
    
    	app.start();
    })();
    

    HTML

    	<div id="switchTemplate" data-win-control="WinJS.Binding.Template">
    		<span data-win-bind="innerText: name"></span>
    		<div id="switchbtn" class="switch" data-win-control="WinJS.UI.ToggleSwitch" data-win-bind="winControl.checked: status" data-win-options=""></div>
    	</div>

    With Regards,

    Krunal Parekh


    Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Proposed as answer by Krunal Parekh Wednesday, November 25, 2015 1:40 AM
    • Marked as answer by RobbyCeyssens Wednesday, November 25, 2015 9:56 PM
    Tuesday, November 24, 2015 9:12 AM