<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Language" content="en">
<meta name="viewport" content="width=1020">


<title>huzijs/README.md at master · zjs1024/huzijs</title>
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub">
<link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-114.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-144.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144.png">
<meta property="fb:app_id" content="1401488693436528">

  <meta content="@github" name="twitter:site" /><meta content="summary" name="twitter:card" /><meta content="zjs1024/huzijs" name="twitter:title" /><meta content="huzijs - Huzi.js is a jQuery plugin used for javascript templates development." name="twitter:description" /><meta content="https://avatars1.githubusercontent.com/u/898193?v=3&amp;s=400" name="twitter:image:src" />
  <meta content="GitHub" property="og:site_name" /><meta content="object" property="og:type" /><meta content="https://avatars1.githubusercontent.com/u/898193?v=3&amp;s=400" property="og:image" /><meta content="zjs1024/huzijs" property="og:title" /><meta content="https://github.com/zjs1024/huzijs" property="og:url" /><meta content="huzijs - Huzi.js is a jQuery plugin used for javascript templates development." property="og:description" />
  <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats">
<meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors">
<link rel="assets" href="https://assets-cdn.github.com/">
<link rel="web-socket" href="wss://live.github.com/_sockets/ODk4MTkzOjdhMzljOTQ4OTVjZDRlM2UxMjZjNGFlM2ZmYjQxODk1OmViYmJiYjljNzAyYmU0NzlkNjU5MTU2MWIxNmRlMjdmMDljODI4MTAxYWY2MDJkMGFkZWI2NTY3MTVmODgxYWU=--c8f359a4fc7a1cf43decb9c0179e3747efe8944b">
<meta name="pjax-timeout" content="1000">
<link rel="sudo-modal" href="/sessions/sudo_modal">

<meta name="msapplication-TileImage" content="/windows-tile.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="selected-link" value="repo_source" data-pjax-transient>

<meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU">
<meta name="google-analytics" content="UA-3769691-2">

<meta name="is-dotcom" content="true">
    <meta name="hostname" content="github.com">
<meta name="user-login" content="zjs1024">

  <link rel="mask-icon" href="https://assets-cdn.github.com/pinned-octocat.svg" color="#4078c0">
  <link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">

<meta content="1bfe02af9379d4eb0c7ba0f161530b1bc3ecd3cd" name="form-nonce" />

<link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/github-60348b331fa450b2228c6d7901d9afe1921385ec9f6f544047e84a4073d825c1.css" integrity="sha256-YDSLMx+kULIijG15Admv4ZITheyfb1RAR+hKQHPYJcE=" media="all" rel="stylesheet" />
<link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/github2-9e83ef1ecc7ceba3d66e3033dd980274ecac3fac0bc5b987cf82d42c663f6f8a.css" integrity="sha256-noPvHsx866PWbjAz3ZgCdOysP6wLxbmHz4LULGY/b4o=" media="all" rel="stylesheet" />





<meta http-equiv="x-pjax-version" content="ef4817c743444ed4205f254c8a1a8b49">

  <div class="header header-logged-in true" role="banner">

<a class="header-logo-invertocat" href="https://github.com/" data-hotkey="g d" aria-label="Homepage" data-ga-click="Header, go to dashboard, icon:logo">

  <div class="site-search repo-scope js-site-search" role="search">
      <!-- </textarea> --><!-- '"` --><form accept-charset="UTF-8" action="/zjs1024/huzijs/search" class="js-site-search-form" data-global-search-url="/search" data-repo-search-url="/zjs1024/huzijs/search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>

This repository

  <ul class="header-nav left" role="navigation">
    <li class="header-nav-item">
      <a href="/pulls" class="js-selected-navigation-item header-nav-link" data-ga-click="Header, click, Nav menu - item:pulls context:user" data-hotkey="g p" data-selected-links="/pulls /pulls/assigned /pulls/mentioned /pulls">
        Pull requests

Issues

Gist

<div class="dropdown-menu-content js-menu-content">
  <ul class="dropdown-menu dropdown-menu-sw">

New repository New organization

This repository

New issue New collaborator

  </ul>
</div>

<div class="dropdown-menu-content js-menu-content">
  <div class="dropdown-menu  dropdown-menu-sw">
    <div class=" dropdown-header header-nav-current-user css-truncate">
        Signed in as <strong class="css-truncate-target">zjs1024</strong>

    </div>


    <div class="dropdown-divider"></div>

      <a class="dropdown-item" href="/zjs1024" data-ga-click="Header, go to profile, text:your profile">
        Your profile
      </a>
    <a class="dropdown-item" href="/stars" data-ga-click="Header, go to starred repos, text:your stars">
      Your stars
    </a>
    <a class="dropdown-item" href="/explore" data-ga-click="Header, go to explore, text:explore">
      Explore
    </a>
      <a class="dropdown-item" href="/integrations" data-ga-click="Header, go to integrations, text:integrations">
        Integrations
      </a>
    <a class="dropdown-item" href="https://help.github.com" data-ga-click="Header, go to help, text:help">
      Help
    </a>

      <div class="dropdown-divider"></div>

      <a class="dropdown-item" href="/settings/profile" data-ga-click="Header, go to settings, icon:settings">
        Settings
      </a>

      <!-- </textarea> --><!-- '"` --><form accept-charset="UTF-8" action="/logout" class="logout-form" data-form-nonce="1bfe02af9379d4eb0c7ba0f161530b1bc3ecd3cd" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="L5WJCpLGk7Zb/upUKYHgn4YboueUZ2p3EnGjZOuLpSrzJKLr5h0K4tUsreJGAs1X3MaEWT3tw4g3ZLyuv+rmFw==" /></div>
        <button class="dropdown-item dropdown-signout" data-ga-click="Header, sign out, icon:logout">
          Sign out
        </button>

<div id="start-of-content" class="accessibility-aid"></div>

<div id="js-flash-container">

<div role="main" class="main-content">
    <div itemscope itemtype="http://schema.org/WebPage">
<div class="pagehead repohead instapaper_ignore readability-menu">

  <div class="container">

    <div class="clearfix">

  <div class="select-menu js-menu-container js-select-menu">
    <a href="/zjs1024/huzijs/subscription"
      class="btn btn-sm btn-with-count select-menu-button js-menu-target" role="button" tabindex="0" aria-haspopup="true"
      data-ga-click="Repository, click Watch settings, action:blob#show">
      <span class="js-select-button">
        <span class="octicon octicon-eye"></span>
        Unwatch
      </span>
    </a>
    <a class="social-count js-social-count" href="/zjs1024/huzijs/watchers">
      1
    </a>

    <div class="select-menu-modal-holder">
      <div class="select-menu-modal subscription-menu-modal js-menu-content" aria-hidden="true">
        <div class="select-menu-header">
          <span class="select-menu-title">Notifications</span>
          <span class="octicon octicon-x js-menu-close" role="button" aria-label="Close"></span>
        </div>

        <div class="select-menu-list js-navigation-container" role="menu">

          <div class="select-menu-item js-navigation-item " role="menuitem" tabindex="0">
            <span class="select-menu-item-icon octicon octicon-check"></span>
            <div class="select-menu-item-text">
              <input id="do_included" name="do" type="radio" value="included" />
              <span class="select-menu-item-heading">Not watching</span>
              <span class="description">Be notified when participating or @mentioned.</span>
              <span class="js-select-button-text hidden-select-button-text">
                <span class="octicon octicon-eye"></span>
                Watch
              </span>
            </div>
          </div>

          <div class="select-menu-item js-navigation-item selected" role="menuitem" tabindex="0">
            <span class="select-menu-item-icon octicon octicon octicon-check"></span>
            <div class="select-menu-item-text">
              <input checked="checked" id="do_subscribed" name="do" type="radio" value="subscribed" />
              <span class="select-menu-item-heading">Watching</span>
              <span class="description">Be notified of all conversations.</span>
              <span class="js-select-button-text hidden-select-button-text">
                <span class="octicon octicon-eye"></span>
                Unwatch
              </span>
            </div>
          </div>

          <div class="select-menu-item js-navigation-item " role="menuitem" tabindex="0">
            <span class="select-menu-item-icon octicon octicon-check"></span>
            <div class="select-menu-item-text">
              <input id="do_ignore" name="do" type="radio" value="ignore" />
              <span class="select-menu-item-heading">Ignoring</span>
              <span class="description">Never be notified.</span>
              <span class="js-select-button-text hidden-select-button-text">
                <span class="octicon octicon-mute"></span>
                Stop ignoring
              </span>
            </div>
          </div>

        </div>

      </div>
    </div>
  </div>

<!-- </textarea> --><!-- '"` --><form accept-charset="UTF-8" action="/zjs1024/huzijs/unstar" class="js-toggler-form starred js-unstar-button" data-form-nonce="1bfe02af9379d4eb0c7ba0f161530b1bc3ecd3cd" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="egrv7a5nwf5NhOK7tmemShXdeOB+SFAlY0cnyXbGHbxLl3cex/8MuHhqacTM86LjIqhWHImJX+3Z1WLOicFXxg==" /></div>
  <button
    class="btn btn-sm btn-with-count js-toggler-target"
    aria-label="Unstar this repository" title="Unstar zjs1024/huzijs"
    data-ga-click="Repository, click unstar button, action:blob#show; text:Unstar">
    <span class="octicon octicon-star"></span>
    Unstar
  </button>
    <a class="social-count js-social-count" href="/zjs1024/huzijs/stargazers">
      2
    </a>

Star 2

Fork 0

      <h1 itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="entry-title public ">

zjs1024/huzijs

    </div>
  </div>
</div>

<div class="container">
  <div class="repository-with-sidebar repo-container new-discussion-timeline ">
    <div class="repository-sidebar clearfix">

Code

  <li class="tooltipped tooltipped-w" aria-label="Issues">
    <a href="/zjs1024/huzijs/issues" aria-label="Issues" class="js-selected-navigation-item sunken-menu-item" data-hotkey="g i" data-selected-links="repo_issues repo_labels repo_milestones /zjs1024/huzijs/issues">
      <span class="octicon octicon-issue-opened"></span> <span class="full-word">Issues</span>
      <span class="js-issue-replace-counter"></span>
      <img alt="" class="mini-loader" height="16" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif" width="16" />

<li class="tooltipped tooltipped-w" aria-label="Pull requests">
  <a href="/zjs1024/huzijs/pulls" aria-label="Pull requests" class="js-selected-navigation-item sunken-menu-item" data-hotkey="g p" data-selected-links="repo_pulls /zjs1024/huzijs/pulls">
      <span class="octicon octicon-git-pull-request"></span> <span class="full-word">Pull requests</span>
      <span class="js-pull-replace-counter"></span>
      <img alt="" class="mini-loader" height="16" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif" width="16" />

  <li class="tooltipped tooltipped-w" aria-label="Wiki">
    <a href="/zjs1024/huzijs/wiki" aria-label="Wiki" class="js-selected-navigation-item sunken-menu-item" data-hotkey="g w" data-selected-links="repo_wiki /zjs1024/huzijs/wiki">
      <span class="octicon octicon-book"></span> <span class="full-word">Wiki</span>
      <img alt="" class="mini-loader" height="16" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif" width="16" />

<li class="tooltipped tooltipped-w" aria-label="Pulse">
  <a href="/zjs1024/huzijs/pulse" aria-label="Pulse" class="js-selected-navigation-item sunken-menu-item" data-selected-links="pulse /zjs1024/huzijs/pulse">
    <span class="octicon octicon-pulse"></span> <span class="full-word">Pulse</span>
    <img alt="" class="mini-loader" height="16" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif" width="16" />

<li class="tooltipped tooltipped-w" aria-label="Graphs">
  <a href="/zjs1024/huzijs/graphs" aria-label="Graphs" class="js-selected-navigation-item sunken-menu-item" data-selected-links="repo_graphs repo_contributors /zjs1024/huzijs/graphs">
    <span class="octicon octicon-graph"></span> <span class="full-word">Graphs</span>
    <img alt="" class="mini-loader" height="16" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif" width="16" />

<div class="sunken-menu-separator"></div>
<ul class="sunken-menu-group">
  <li class="tooltipped tooltipped-w" aria-label="Settings">
    <a href="/zjs1024/huzijs/settings" aria-label="Settings" class="js-selected-navigation-item sunken-menu-item" data-selected-links="repo_settings repo_branch_settings hooks /zjs1024/huzijs/settings">
      <span class="octicon octicon-gear"></span> <span class="full-word">Settings</span>
      <img alt="" class="mini-loader" height="16" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32.gif" width="16" />

        <div class="only-with-full-nav">

HTTPS clone URL

SSH clone URL

Subversion checkout URL

You can clone with

HTTPS,

SSH, or

Subversion.

Clone in Desktop

          <a href="/zjs1024/huzijs/archive/master.zip"
             class="btn btn-sm sidebar-button"
             aria-label="Download the contents of zjs1024/huzijs as a zip file"
             title="Download the contents of zjs1024/huzijs as a zip file"
             rel="nofollow">
            <span class="octicon octicon-cloud-download"></span>
            Download ZIP
          </a>
        </div>
    </div>
    <div id="js-repo-pjax-container" class="repository-content context-loader-container" data-pjax-container>

Permalink

Branch: master

<div class="select-menu-modal">
  <div class="select-menu-header">
    <span class="select-menu-title">Switch branches/tags</span>
    <span class="octicon octicon-x js-menu-close" role="button" aria-label="Close"></span>
  </div>

  <div class="select-menu-filters">
    <div class="select-menu-text-filter">
      <input type="text" aria-label="Find or create a branch…" id="context-commitish-filter-field" class="js-filterable-field js-navigation-enable" placeholder="Find or create a branch…">
    </div>
    <div class="select-menu-tabs">
      <ul>
        <li class="select-menu-tab">
          <a href="#" data-tab-filter="branches" data-filter-placeholder="Find or create a branch…" class="js-select-menu-tab" role="tab">Branches</a>
        </li>
        <li class="select-menu-tab">
          <a href="#" data-tab-filter="tags" data-filter-placeholder="Find a tag…" class="js-select-menu-tab" role="tab">Tags</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="branches" role="menu">

    <div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">


        <a class="select-menu-item js-navigation-item js-navigation-open selected"
           href="/zjs1024/huzijs/blob/master/README.md"
           data-name="master"
           data-skip-pjax="true"
           rel="nofollow">
          <span class="select-menu-item-icon octicon octicon-check"></span>
          <span class="select-menu-item-text css-truncate-target" title="master">
            master
          </span>
        </a>
    </div>

      <!-- </textarea> --><!-- '"` --><form accept-charset="UTF-8" action="/zjs1024/huzijs/branches" class="js-create-branch select-menu-item select-menu-new-item-form js-navigation-item js-new-item-form" data-form-nonce="1bfe02af9379d4eb0c7ba0f161530b1bc3ecd3cd" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="C8ZBTzK8ZgwYtCDLiw1DQ2QTzWG8jouTGfjDpdu8ndua1PqVr3WdQh0CfRJk6bs5U1BwSLuRMu0Cfwza9w0RsQ==" /></div>
        <span class="octicon octicon-git-branch select-menu-item-icon"></span>
        <div class="select-menu-item-text">
          <span class="select-menu-item-heading">Create branch: <span class="js-new-item-name"></span></span>
          <span class="description">from ‘master’</span>
        </div>
        <input type="hidden" name="name" id="name" class="js-new-item-value">
        <input type="hidden" name="branch" id="branch" value="master">
        <input type="hidden" name="path" id="path" value="README.md">

  <div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="tags">
    <div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">


    </div>

    <div class="select-menu-no-results">Nothing to show</div>
  </div>

</div>

<div class="btn-group right">
  <a href="/zjs1024/huzijs/find/master"
        class="js-show-file-finder btn btn-sm empty-icon tooltipped tooltipped-nw"
        data-pjax
        data-hotkey="t"
        aria-label="Quickly jump between files">
    <span class="octicon octicon-list-unordered"></span>
  </a>
  <button aria-label="Copy file path to clipboard" class="js-zeroclipboard btn btn-sm zeroclipboard-button tooltipped tooltipped-s" data-copied-hint="Copied!" type="button"><span class="octicon octicon-clippy"></span></button>
</div>

<div class="breadcrumb js-zeroclipboard-target">
  <span class="repo-root js-repo-root"><span itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/zjs1024/huzijs" class="" data-branch="master" data-pjax="true" itemscope="url"><span itemprop="title">huzijs</span></a></span></span><span class="separator">/</span><strong class="final-path">README.md</strong>
</div>

08869d2 Oct 20, 2015

zjs1024 Update README.md

<div class="commit-tease-contributors">
  <a class="muted-link contributors-toggle" href="#blob_contributors_box" rel="facebox">
    <strong>1</strong>
     contributor
  </a>
  
</div>

<div id="blob_contributors_box" style="display:none">
  <h2 class="facebox-header" data-facebox-id="facebox-header">Users who have contributed to this file</h2>
  <ul class="facebox-user-list" data-facebox-id="facebox-description">
      <li class="facebox-user-list-item">
        <img alt="@zjs1024" height="24" src="https://avatars1.githubusercontent.com/u/898193?v=3&amp;s=48" width="24" />
        <a href="/zjs1024">zjs1024</a>
      </li>
  </ul>
</div>

<div class="btn-group">
  <a href="/zjs1024/huzijs/raw/master/README.md" class="btn btn-sm " id="raw-url">Raw</a>
    <a href="/zjs1024/huzijs/blame/master/README.md" class="btn btn-sm js-update-url-with-hash">Blame</a>
  <a href="/zjs1024/huzijs/commits/master/README.md" class="btn btn-sm " rel="nofollow">History</a>
</div>

  <a class="octicon-btn tooltipped tooltipped-nw"
     href="github-windows://openRepo/https://github.com/zjs1024/huzijs?branch=master&amp;filepath=README.md"
     aria-label="Open this file in GitHub Desktop"
     data-ga-click="Repository, open with desktop, type:windows">
      <span class="octicon octicon-device-desktop"></span>
  </a>

    <!-- </textarea> --><!-- '"` --><form accept-charset="UTF-8" action="/zjs1024/huzijs/edit/master/README.md" class="inline-form js-update-url-with-hash" data-form-nonce="1bfe02af9379d4eb0c7ba0f161530b1bc3ecd3cd" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="6u/iOhu4CMUWJ0aKkDZK6JoyqBiC7gAY9Wx6Wl557HiNA5lK8lsRIxUmLkgmWG/sb39ii2AhARmkqr+nVfCFkg==" /></div>
      <button class="octicon-btn tooltipped tooltipped-nw" type="submit"
        aria-label="Edit this file" data-hotkey="e" data-disable-with>
        <span class="octicon octicon-pencil"></span>
      </button>

185 lines (182 sloc) 7.21 KB

huzi.js

Summary

huzi.js is a jQuery plugin used for js templating development .

support template as string or html files, make the project more orangizable.
support JSON data binding
support contrinal logic and loops; also support muliti-level embedded loops and logic
support object oriented object naming conventions binding
support two ways data binding between form and JSON data
support form data validation during form binding
support node.js express template engine

JSON data and template

Huzi using JSON as binding data

 var products = [
              {
                  "id": "bb_070915_001", 
                  "images": [ {url:"img/img1.jpg", title:"p1"},
                              {url:"img/img2.jpg", title:"p2"},
                              {url:"img/img3.jpg", title:"p3"}],
                  "name": "Canvas check hobo bag", 
                  "price": "795",
                  "desc": "Medium canvas check hobo bag",
                  "date": "07/09/2015"
              }, ...]

Huzi template can be a string or html file loaded using AJAX

                // using string template
                var temp = ["<div>",   
                            "{{if this.a < 0}}",
                               "<span> a > 0 </span>",
                            "{{else}}",
                               "<span> a <= 0 </span>",
                            "{{endif}}",
                            "</div>"].join("");
                //or html in a file and load using AJAX
                   <div>
                      {{if this.a > 0}}
                      <span> a > 0 </span>
                      {{else}}
                      <span> a <= 0 </span>
                      {{endif}}
                   </div>
                $.get("template/shared/demo1.html", function(temp){
                   ...   
                }

Usage

Init a jQuery plugin

                 $("#container").huzi({
                       data: products,
                       template: temp 
                     });
                 })

To call a Huzi function or data

              $("#container").data("huzi").data = newdata;
              $("#container").data("huzi").rebind(newdata);

`{{repeat array}}` to do the loops, `{{repeat}}` for default array.

              {{repeat images}}
                 <img src="{{url}}" alt="{[title}}"/>
              {{endrepeat}}

`{{if }} ... {{elsif }} ... {{else}} ... {{endif}}` to do the condictional logic

this in the logic pointing to the current scope, that point to current jQuery element, like: {{that.data}} equals $("#element").data("huzi").data

              {{if this.price > 100}}
                 <span class="mark" > {{price}} </span>
              {{else}}
                 <span > {{price}} </span>
              {{endif}}

Conditaion logic and loops can combine together and embed each other

             var products_temp = [
              '<table class="table">',
                '<tr><th style="width:400px;">';
                '<th><th>Name<th>',
                '<th>Description<th><th>Price<th></tr>',
                '{{repeat}}',
                  '<tr><td>',
                  '{{repeat images}}',
                     '<img src="{{url}}" class="img-thumbnail" alt="{{title}}"/>',
                  '{{endrepeat}}</td>',
                  '<td>{{name}}</td><td>{{desc}}</td><td ',
                   'class="{{if parseInt(this.price) > 600}}mark{{endif}}"</td>',
                '</tr>',
                '{{endrepeat}}',
              '</table>'].join("");
            $("#products_div").huzi({
                 data:products,
                 template: products_temp,
                 bindingComplete: function(e){
                  console.log(this);
                 }
             });

`{{fun funname parm1 parm2 ...}}` can be used to call a external function

              <script>
                  var formatMoney = function(str){
                         ...
                         return "$" + str;
                  }
              </script>
          //in template
          ...
           price : {{fun formatMay price}}
      </pre>
  </div>

Form Data binding and validation

Implemented two way data binding between javascript object and form elements, form validation and functions to toggle between read only and edit mode. Function getFormData and setFormData can be used menually binding data between form elements and JSON object. readonlyForm and enableForm can be used to toggle between read only and edit mode.

Demo

A small search engine created with huzi.js: product-list.html

As a Node.js template engine

Install in node: npm install huzi

To use as a template engine

 
          app.set('views', __dirname+'\\views');
          app.set('view engine', 'huzi');
          app.get('/', function(req, res) {
             //hello.huzi in views
             res.render('hello',products);
          });

Reference

To call a variable or function in Huzi plugin is the same as in Bootstrap plugin, like: $("#somediv").data("huzi").rebind(data)

appendable: when doing rebinding, you can define appendable in options to true, thus the value will be appended to the jQuery element, instead of replace it. The default value is false.

bind: you can call the bind function to force binding with current data and template.

data: data is the data object saved in JSON format.

rebind(data): you can call the rebind function to force a data binding with new data.

template: template varible used to save the template string.

Jump to Line

    </div>
  </div>
  <div class="modal-backdrop"></div>
</div>

</div>

  <div class="container">

Status
API
Training
Shop
Blog
About
Pricing

</ul>

<a href="https://github.com" aria-label="Homepage">
  <span class="mega-octicon octicon-mark-github" title="GitHub"></span>

Terms
Privacy
Security
Contact
Help

<div id="ajax-error-message" class="flash flash-error">
  <span class="octicon octicon-alert"></span>
  <button type="button" class="flash-close js-flash-close js-ajax-error-dismiss" aria-label="Dismiss error">
    <span class="octicon octicon-x"></span>
  </button>
  Something went wrong with that request. Please try again.
</div>


  <script crossorigin="anonymous" integrity="sha256-CA8cFVoo9aQxXUpoYq6vt+J7ygp022966eAEjjITadE=" src="https://assets-cdn.github.com/assets/frameworks-080f1c155a28f5a4315d4a6862aeafb7e27bca0a74db6f7ae9e0048e321369d1.js"></script>
  <script async="async" crossorigin="anonymous" integrity="sha256-2T0iiCiBK1faaqu9RFTGOUBuDWlNK49lhKGQVIr99dU=" src="https://assets-cdn.github.com/assets/github-d93d228828812b57da6aabbd4454c639406e0d694d2b8f6584a190548afdf5d5.js"></script>
  
  
<div class="js-stale-session-flash stale-session-flash flash flash-warn flash-banner hidden">
  <span class="octicon octicon-alert"></span>
  <span class="signed-in-tab-flash">You signed in with another tab or window. <a href="">Reload</a> to refresh your session.</span>
  <span class="signed-out-tab-flash">You signed out in another tab or window. <a href="">Reload</a> to refresh your session.</span>
</div>

huzi

HTTPS clone URL

SSH clone URL

Subversion checkout URL

huzi.js

Summary

JSON data and template

Huzi using JSON as binding data

Huzi template can be a string or html file loaded using AJAX

Usage

Init a jQuery plugin

To call a Huzi function or data

`{{repeat array}}` to do the loops, `{{repeat}}` for default array.

`{{if }} ... {{elsif }} ... {{else}} ... {{endif}}` to do the condictional logic

Conditaion logic and loops can combine together and embed each other

`{{fun funname parm1 parm2 ...}}` can be used to call a external function

Form Data binding and validation

Demo

As a Node.js template engine

Reference

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Last publish

Collaborators

huzi

HTTPS clone URL

SSH clone URL

Subversion checkout URL

huzi.js

Summary

JSON data and template

Huzi using JSON as binding data

Huzi template can be a string or html file loaded using AJAX

Usage

Init a jQuery plugin

To call a Huzi function or data

{{repeat array}} to do the loops, {{repeat}} for default array.

{{if }} ... {{elsif }} ... {{else}} ... {{endif}} to do the condictional logic

Conditaion logic and loops can combine together and embed each other

{{fun funname parm1 parm2 ...}} can be used to call a external function

Form Data binding and validation

Demo

As a Node.js template engine

Reference

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Last publish

Collaborators

`{{repeat array}}` to do the loops, `{{repeat}}` for default array.

`{{if }} ... {{elsif }} ... {{else}} ... {{endif}}` to do the condictional logic

`{{fun funname parm1 parm2 ...}}` can be used to call a external function

Weekly Downloads