Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
app
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Dig-Knockout

Dig-Knockout is a tiny library which trys to show you how the popular library of MVVM works. Maybe you are confused for the mechanism because you have experienced many similar frameworks only by calling API.

So, I write the same functions just like Konockoutjs, some bingdings instruction(text, html, click, if, foreach) has been implimented in this library, I hope this tiny guy could help you understand how to design a framwork of MVVM.

Now let's dig it out together.

Installing Dependencies

  1. Install Javascript Libraries
    • bower install
  2. Install node_modules
    • npm install
  3. Install grunt
    • npm install -g grunt-cli

Grunt Task

  1. Start Server
    • grunt
  2. Run Test
    • grunt test Also you can open test in browser, Plesae open test/index.html
  3. Build App
    • grunt build

Demo

using libraries:

<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="scripts/myknockout.js"></script>

template:

<template id="demo">
    <div data-bind="foreach: messages">
        <h4>
            <a data-bind="text: title"></a>
        </h4>
        <p data-bind="text: content"></p>
    </div> 
</template>

viewModel:

(function() {
    var viewModel = {
        messages: ko.observableArray([
            {
                title: "HTML5 Boilerplate",
                content: "HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites."
            },
            {
                title: "Sass",
                content: "Sass is a mature, stable, and powerful professional grade CSS extension language."
            },
            {
                title: "Bootstrap",
                content: "Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development."
            },
            {
                title: "Modernizr",
                content: "Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites."
            }
        ])
    };
    ko.applyBindings(viewModel, 'demo');
})(this);

About

I will try to show you the mechanism in MVVM(example for Knockoutjs).

Resources

Releases

No releases published

Packages

No packages published