winjs / knockout-winjs

Project to smooth the Knockout/WinJS interaction

Windows Library for JavaScript (WinJS)

Status

Microsoft is committed to making sure that WinJS continues to run for existing customers. At this time we don't have plans to invest in new features or feature requests. Bug fixes will be limited to correcting substantial issues that are blocking customer deployments. We may also consider bug fixes to help our customers maintain their existing WinJS-based apps.

Intro

WinJS is a set of JavaScript toolkits that allow developers to build applications using HTML/JS/CSS technology forged with the following principles in mind:

• Provide developers with a distinctive set of UI controls with high polish and performance with fundamental support for touch, mouse, keyboard and accessibility
• Provide developers with a cohesive set of components and utilities to build the scaffolding and infrastructure of their applications

This is a first step for the WinJS project and there is still a lot of work that needs to be done. Feel free to participate by contributing along the way.

Contribute

There are many ways to contribute to the project.

You can contribute by reviewing and sending feedback on code checkins, suggesting and trying out new features as they are implemented, submitting bugs and helping us verify fixes as they are checked in, as well as submitting code fixes or code contributions of your own.

Note that all code submissions will be rigorously reviewed and tested by the team, and only those that meet an extremely high bar for both quality and design appropriateness will be merged into the source.

Build WinJS

In order to build WinJS, ensure that you have git and Node.js installed.

Clone a copy of the master WinJS git repo:

git clone https://github.com/winjs/winjs.git

Change to the winjs directory:

cd winjs

Install the grunt command-line interface globally:

npm install -g grunt-cli

Grunt dependencies are installed separately in each cloned git repo. Install the dependencies with:

npm install

Run the following and the WinJS JavaScript and CSS files will be put in the bin directory:

grunt

Note: You may need to use sudo (for OSX, *nix, BSD etc) or run your command shell as Administrator (for Windows) to install Grunt globally.

Tests status

Refer to http://winjs.azurewebsites.net/#status for the current status of the unit tests and the list of known issues.

Try WinJS

Check out our online playground at http://winjsdevelop.azurewebsites.net/

Follow Us

Twitter https://twitter.com/BuildWinJS
Facebook https://www.facebook.com/buildwinjs

knockout-winjs's Issues

Templates used with FlipView can't access outer binding context ($parent, $root, etc)

It seems that FlipView templates only get passed the bound item, and can't access $parent, $root, etc.

winAppBar with observable Array for winAppBarCommands

Hi,

I'm having some issues trying to make the appbar Commands observables with a KnockoutObservableArray .

The best approach was something like this:

<div data-bind="winAppBar:{'placement':commandBar.placement}">
                        <!-- ko foreach:commandBar.commands()-->
                        <button data-bind="winAppBarCommand:{'label':label,'icon':icon,'tooltip':tooltip,'section':section}" button>
                        <!--/ko-->
                    </div>

But it has a problem when navigating between pages and the observable array changes, that makes the commads appears on the virtual ko tags, makes sense because kncokout-winjs doesn't has a bindingListWatch or something else.

Also I tried using WinJS Toolbar control, it has a "data" option that can use WinJS.Binding.List but in knockout-winjs I didn't find it, are there plans to include it?

Thanks!

Possible bug in bindingListWatch

I noticed that bindingListWatch was modified in the version of knockout-winjs used in the CharMap //build demo:

https://github.com/MicrosoftEdge/CharMap/blob/master/js/lib/knockout-winjs.js

If you diff that file with the initial check in of knockout-winjs in this repo, you'll see there are a few differences:

We should investigate why those changes were made and make a fix in this repo if needed.

winListView binding doesn't correctly cleanup when user calls ko.cleanNode.

After calling ko.cleanNode on an element with an active winListView binding, the observable array passed as itemDataSource still has _winKoChangesSubscription and _winKoBindingList. If you attempt to rebind this array, to another winjs listview, the observable array and WinJS ListBinding will never synchronize because the subscription to the old ListBinding is still active and on the array.

A proposed fix for this is to call ko.utils.domNodeDisposal.addDisposeCallback on the element with the binding to detect a call to cleanNode. In the callback, you can dispose of the subscription and delete the _winKo members from the observable array.

I'm effectively doing this cleanup in my control's dispose handler as a workaround.

Foreach binding with hubs and pivots is not updated after the initial binding

winSplitViewCommand with PNG Icon

Hey there,
How can I use png icons in the SplitView?

I tried with:

  <div class="nav-command" data-bind="winSplitViewCommand:{label: Title(), icon:FontIcon()}"></div>

Where FontIcon() is a KnockoutObservable<string> with a url for png or just the icons enum name like "home" for the rest.

Thanks for your time!

$root.Function not working on button inside listview item

Having a problem with event handler for buttons inside list view item.
Everything seems to be working good, but once you declare a button/anchor inside the template, the event is not bonded to the element.

 <div class="listView" data-bind="winListView: {itemDataSource: itemlist, itemTemplate: 'listItemTemplate', layout: {type: WinJS.UI.GridLayout}}">
   <progress class=" win-ring win-medium"></progress>
 </div>
 <script type="text/html" id="listItemTemplate">
   <div class="listViewItem">

     <div data-bind="css: cssClass">
       <div class="row">
         <div class="large-2 columns">
           <a id="removeFromList" data-bind="click: $root.removeItem" class="tiny"><i class="fi-x"></i></a>
         </div>
         <div class="large-10 columns">
           <img data-bind="style: { backgroundImage: urlProfilePic }" />
           <p data-bind="text: fullname"></p>
         </div>
       </div>
     </div>

   </div>
 </script>

Here is a full HTML example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/css/ui-light.css" />

</head>
<body>

     <h5>Listview Example with Knockout</h5>
     <button type="button" data-bind="click: $root.addItem" class="hollow button">add item</button>

     <div id="itemList" class="listView" data-bind="winListView: {itemDataSource: itemlist, itemTemplate: 'listItemTemplate', layout: {type: WinJS.UI.GridLayout}}">
       <progress class=" win-ring win-medium"></progress>
     </div>
     <script type="text/html" id="listItemTemplate">
       <div id="eachitem" class="listViewItem">

         <div data-bind="css: cssClass">
           <div class="row">
               <img data-bind="style: { backgroundImage: urlPic }" />
               <p data-bind="text: fullname"></p>
               <a data-bind="click: $root.removeItem" class="tiny button action win-interactive" 
                    data-win-control="WinJS.UI.AppBarCommand">remove item</a>
           </div>
         </div>

       </div>
     </script>

     <h5>Listview Example without Knockout, using an array only</h5>

     <div id="itemviewtemplate" data-win-control="WinJS.Binding.Template">
         <div data-win-bind="className: cssClass">
           <div class="row">
                <p data-win-bind="textContent: fullname"></p>

                <button class="action win-interactive" data-win-control="WinJS.UI.AppBarCommand"
                        data-win-options="{id:'removeFromList', tooltip:'remove item', icon: 'delete'}"
                        data-win-bind="this['data-itemname'] : fullname WinJS.Binding.setAttribute"
                        data-displaytype="button"
                        type="button"></button>            

           </div>
         </div>  
     </div>
     <div id="otherlist"></div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script> 

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/base.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/ui.js"></script>

    <script type="text/javascript" src="knockout-winjs.js"></script>

    <script type="text/javascript" >

        var ItemModel = function(items) {
            var self = this;
            self.itemlist = ko.observableArray(items);

            self.addItem = function() {
                self.itemlist.push({
                    fullname: "new item " + (1+self.itemlist().length),
                    cssClass: "item-class" + (1+self.itemlist().length),
                    urlPic: ""
                });
            };

            self.removeItem = function(item) {
                alert("remove item from list " + item.fullname);
                self.itemlist.remove(item);
            };

        };

        var items = [
            { fullname: "Tall Hat", cssClass: "item-class1", urlPic:""},
            { fullname: "Long Cloak", cssClass: "item-class2", urlPic:""},
            { fullname: "Steve Yes", cssClass: "item-class3", urlPic:""},
            { fullname: "Mr Brown", cssClass: "item-class4", urlPic:""},
            { fullname: "Bob Smith", cssClass: "item-class5", urlPic:""}
        ];

        var viewModel = new ItemModel(items);           

        $( document ).ready(function() {

            // Starts the application
            var app = WinJS.Application;
            app.addEventListener("activated", Initiate, false);
            app.start();    

        });

        function Initiate(){

            // solutions used without knockout
            bindList();
            $(document).foundation();
            ko.applyBindings(viewModel)

        }

        function bindList(){

             WinJS.UI.processAll(document.getElementById("otherlist"));
             var viewDiv = document.getElementById("otherlist");

             var itemDiv = document.getElementById("itemviewtemplate");
             var itemTemplate = new WinJS.Binding.Template(itemDiv);             

             var list = new WinJS.Binding.List(items);

             var listView = new WinJS.UI.ListView(viewDiv, null);
             var layout = new WinJS.UI.GridLayout();
             listView.layout = layout;  
             // remove the line below and the listview title will also be clickable
             listView.selectionMode = WinJS.UI.SelectionMode.none;           
             listView.itemDataSource = list.dataSource;
             listView.oniteminvoked = itemView;
             listView.itemTemplate = itemsItemTemplateRenderer;
             listView.forceLayout();

             WinJS.Utilities.markSupportedForProcessing(itemsItemTemplateRenderer);

        }

        function itemView(ev) {

            var viewDiv = ev.currentTarget;
            if (viewDiv === null || viewDiv === undefined) { return; };
            var view = viewDiv.winControl;
            if (view === null || view === undefined) { return; };

            view.itemDataSource.itemFromIndex(ev.detail.itemIndex).then(
              function (item) {
                alert("loading item " + item.data.fullname);
              });

        }

        function itemsItemTemplateRenderer(itemPromise) {
            var self = this;
            var itemDiv = document.getElementById("itemviewtemplate");
            var container = document.createElement('div');

            return itemPromise.then(
              function onitem(item) {
                return itemDiv.winControl.render(item.data, container);
              }).then(
              function onrendercomplete(c) {
                // register event listener
                var button = c.querySelector('#removeFromList');
                button.onclick = removeItem.bind(self);
                return container;
              });

        }

        function removeItem(ev){

            alert("remove item from list " + $(ev.currentTarget).data("itemname"));

        }

    </script>

</body>
</html>

Update for WinJS 4.0

This appears to still be built against a much outdated version of WinJS. Would love to use this.