- add template to support recursive views

 - prevent internal view from overwriting options provided by ldview
   logic
 - bump version

Author: zbryikt

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Logs
 
+## v0.2.2
+
+ - add `template` to support recursive views
+ - prevent internal view from overwriting options provided by ldview logic 
+
+
 ## v0.2.1
 
  - support refering to view root with name `@`.

README.md

@@ -93,6 +93,14 @@ Or, let ldView do it for you with `view` option:
               name: (.node.textContent = data.name)
               author: (.node.textContent = data.author)
 
+While you can use the same options in this view config as the ldview constructor, following fields will be overwritten by ldview:
+
+ - `initRender`
+ - `root`
+ - `baseViews`
+ - `ctx`
+ - `ctxs`
+
 
 After initialization, You probably will want to update some elements instead of updating every node. Just pass target names into render function:
 
@@ -184,6 +192,7 @@ Basically `Scope` and `Prefix` are mutual exclusive; with `scope` you don't have
  * `global` - set true to use `pd` and `pd-each` for access nodes globally beyond ld-scope. default false.
  * `ctx` - default data accessible with in handler functions. can be set later with `setContext` api.
    - `context` is used as `ctx` before `0.1.0`, and it's now `ctx`.
+ * `template` - template DOM for replacing root content. It's for supporting recursive views.
  * `ctxs` and `baseViews` - these config are used internally. Don't use this unless you know what's your doing.
 
 ## API
@@ -236,6 +245,31 @@ When handlers for each ld node is called, it contains following parameters:
    - `views[0]` is always the current view. larger number gets ancestor views.
 
 
+## Recursive Views and Template
+
+It's possible to define view recursively - simply refer a view config in itself:
+
+    (cfg = {}) <<< handler: someDirective: {
+      list: -> ...
+      view: cfg
+    }
+
+However, this requires a recursively defined DOM, which is only possible with `template` option:
+
+    div(data-name="template"): ...
+    script(type="text/livescript").
+      new ldview (cfg = {}) <<< {
+        template: document.querySelector('[data-name=template]')
+        handler: someDirective: {
+          list: ({ctx}) -> ...
+          view: cfg
+        }
+      }
+
+In this case, the div named `template` will be cloned, attached and used as inner DOM of this view, recursively applied according to the return content of `list`. For a working example, check `web/src/pug/recurse/index.ls`.
+
+
+
 ## License
 
 MIT

dist/index.js

@@ -37,6 +37,10 @@
       this.id = "ld-" + Math.random().toString(36).substring(2);
       this.root.setAttribute("ld-scope-" + this.id, '');
     }
+    if (this.template = opt.template) {
+      this.root.textContent = '';
+      this.root.appendChild(this.template.cloneNode(true));
+    }
     this.update();
     names = {};
     for (i$ = 0, len$ = (ref$ = [(fn$.call(this))].concat([(fn1$.call(this))], [(fn2$.call(this))], [(fn3$.call(this))], [(fn4$.call(this))], (fn5$.call(this)).map(fn6$))).length; i$ < len$; ++i$) {
@@ -324,17 +328,11 @@
       if (b) {
         if (b.view) {
           init = function(arg$){
-            var node, local, data, ctx, ctxs, views;
+            var node, local, data, ctx, ctxs, views, ref$;
             node = arg$.node, local = arg$.local, data = arg$.data, ctx = arg$.ctx, ctxs = arg$.ctxs, views = arg$.views;
-            return local._view = new ldview(import$({
-              initRender: false,
-              root: node,
-              baseViews: views,
-              ctx: data,
-              ctxs: ctxs
-                ? [ctx].concat(ctxs)
-                : [ctx]
-            }, b.view));
+            return local._view = new ldview((ref$ = import$({}, b.view), ref$.initRender = false, ref$.root = node, ref$.baseViews = views, ref$.ctx = data, ref$.ctxs = ctxs
+              ? [ctx].concat(ctxs)
+              : [ctx], ref$));
           };
           handler = function(arg$){
             var local, data;

dist/index.min.js

@@ -4,7 +4,7 @@
   "license": "MIT",
   "main": "dist/ldview.min.js",
   "description": "view template micro framework",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "files": [
     "dist/**/*"
   ],

package-lock.json

@@ -26,6 +26,9 @@ ldview = (opt = {}) ->
     @id = "ld-#{Math.random!toString(36)substring(2)}"
     # ld-scope-${id} is used to identify a ldview object, for code of excluding scoped object
     @root.setAttribute "ld-scope-#{@id}", ''
+  if (@template = opt.template) =>
+    @root.textContent = ''
+    @root.appendChild @template.cloneNode(true)
 
   @update!
 
@@ -168,10 +171,10 @@ ldview.prototype = Object.create(Object.prototype) <<< do
     if b =>
       if b.view =>
         init = ({node,local,data,ctx,ctxs,views}) ->
-          local._view = new ldview({
+          local._view = new ldview({} <<< b.view <<< {
             init-render: false, root: node, base-views: views
             ctx: data, ctxs: (if ctxs => [ctx] ++ ctxs else [ctx])
-          } <<< b.view)
+          })
         handler = ({local,data}) -> local._view.setCtx(data); local._view.render!
       else
         init = b.init or null

package.json

@@ -0,0 +1,30 @@
+view = new ldview do
+  root: document.body
+  handler: template: (->), root: (->)
+template = view.get('template')
+template.removeAttribute \ld-scope
+template.parentNode.removeChild template
+root = view.get('root')
+
+data = {name: 1, child: [
+  {name: "1.1"}
+  {name: "1.2", child: [
+    {name: "2.1", child: [
+      {name: "3.1"}
+      {name: "3.2"}
+      {name: "3.3"}
+    ]}
+    {name: "2.2"}
+    {name: "2.3"}
+  ]}
+  {name: "1.3"}
+]}
+
+
+rview = new ldview (cfg = {}) <<< do
+  ctx: data, root: root
+  template: template
+  text: name: ({ctx}) -> ctx.name
+  handler: item:
+    list: ({ctx}) -> ctx.child or []
+    view: cfg

src/ldview.ls

@@ -0,0 +1,18 @@
+doctype html
+include @/bootstrap.ldui/dist/index.pug
+include @static/assets/lib/ldview/dev/index.pug
+html
+  head
+    +css("/assets/lib/bootstrap/main/css/bootstrap.min.css")
+    +css("/assets/lib/bootstrap.ldui/main/bootstrap.ldui.min.css")
+  body
+    .w-1024.rwd.mx-auto.typeset.heading-contrast.my-4
+      h3 Recursive Views Test
+      div(ld-scope,ld="template")
+        .px-4
+          div(ld="name")
+          div: div(ld-each="item")
+      div(ld="root")
+    +script("/assets/lib/@loadingio/ldquery/main/ldq.min.js")
+    +script("/assets/lib/ldview/dev/index.js")
+    script: include:lsc index.ls