Skip to content
I will try to show you the mechanism in MVVM(example for Knockoutjs).
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
test
.gitignore
Gruntfile.js
README.md
bower.json
package.json

README.md

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);

You can’t perform that action at this time.