JSViews--JQuery系的MVVM框架

Posted 2020-10-20 LightSong@计海拾贝

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JSViews--JQuery系的MVVM框架相关的知识，希望对你有一定的参考价值。

JSViews

https://github.com/BorisMoore/jsviews

JsViews: next-generation MVVM and MVP framework - bringing templates to life

The power of MVVM, the flexibility of javascript, the speed and ease of JsRender templates and jQuery

JsViews builds on top of JsRender templates, and adds data-binding and observable data, to provide a fully-fledged MVVM platform for easily creating interactive data-driven single-page apps and websites.

例子

http://www.jsviews.com/#samples

http://www.jsviews.com/#jsvplaying

<!DOCTYPE html>
<!-- To run the current sample code in your own environment, copy this to an html page. -->

<html>
<head>
  <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
  <base href="//www.jsviews.com/samples/" />
  <script src="../download/jsviews.min.js"></script>
  <link href="samples.css" rel="stylesheet" />
</head>
<body>

<table><tbody id="peopleList"></tbody></table>

<script id="peopleTmpl" type="text/x-jsrender">
  <tr><td>
    <button id="addBtn">Add</button>
  </td></tr>
  {^{for people}}
    <tr><td>
      {{:name}}
    </td></tr>
  {{/for}}
</script>

<script>
var myTemplate = $.templates("#peopleTmpl");

var people = [
    {
      name: "Adriana"
    },
    {
      name: "Robert"
    }
  ];

var app = {
    people: people
  };

myTemplate.link("#peopleList", app);

$("#addBtn").on("click", function() {
  $.observable(people).insert({name: "name"});
});
</script>

</body>
</html>

JSViews API

http://www.jsviews.com/#jsvapi

JsRender and JsViews

JsRender is used for data-driven rendering of templates to strings, ready for insertion in the DOM. (See JsRender Quickstart and JsRender GitHub repository).

JsViews incorporates JsRender templates, together with data-binding, observable data and MVVM support. It provides a powerful platform for building dynamic interactive websites and single-page apps.

(Note: JsRender and JsViews together provide the next-generation implementation of the official jQuery plugins JQuery Templates, and JQuery Data Link – and supersede those libraries.)