winjs / knockout-winjs Goto Github PK

Project to smooth the Knockout/WinJS interaction

License: MIT License

JavaScript 100.00%

knockout-winjs's Introduction

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/

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

knockout-winjs's People

Contributors

Stargazers

Watchers

Forkers

richicoder1 mpelaeze cthedot thomas-lee greyfoxrgr billwaddyjr nozzlegear modulexcite chunchill esironal isabella232 azure-hu bryanchance

knockout-winjs's Issues

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!

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!

Update for WinJS 4.0

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

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.

$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>

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.

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

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.