Skip to content

Commit

Permalink
working
Browse files Browse the repository at this point in the history
  • Loading branch information
@7immer
7immer committed Mar 16, 2016
1 parent 8c24453 commit 670edc7
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 135 deletions.
110 changes: 61 additions & 49 deletions viewmodel-demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,76 @@
</head>

<body>
{{> demoVM }}
{{>myForm shared="pages"}}
</body>

<template name="demoVM">
<input {{b "value: tester('layout~3~item' this)"}} type="text" style="width: 100%;box-sizing: border-box;">
<template name="myForm">
{{>textInput shared="pages" ss="title" val=(b "value: formData.title") style="width:40%;background:red;float:left"}}
{{>textInput shared="pages" ss="url" val=(b "value: formData.url") style="width:40%;background:red;float:left"}}
{{>checkInput shared="pages" ss="active" val=(b "check: formData.active") style="width:20%;background:red;float:left"}}
{{>textareaInput shared="pages" ss="body" val=(b "value: formData.body") style="background:red;"}}
{{> dynamicCompsForm shared="pages"}}
<button {{b "click: submit"}}>submit</button>
<!-- {{#each collection}} -->
<!-- {{>Template.dynamic template=(getArrayVal 'layout~$~item' @index) }} -->
<!-- {{/each}} -->
{{#each staticFormData.layout}}
</template>

<template name="dynamicCompsForm">
{{#each formData.layout}}
<hr />
<input {{b "value: this.item"}} type="text" name="name">
<b>{{this.item}}</b>
<button type="button" {{b "click: delete(this._id)"}}>Del</button>
{{>Template.dynamic template=this.item data=this}}
<hr />
{{/each}}
<button type="button" {{b "click: add(hero)"}}>Add Hero</button>
<button type="button" {{b "click: add(billboard)"}}>Add Billboard</button>
<div class="">
<button type="button" {{b "click: add('hero')"}}>Add Hero</button>
<button type="button" {{b "click: add('billboard')"}}>Add Billboard</button>
</div>
</template>

<template name="textInput">
<div class="{{class}}" style="{{style}}">
<div style="padding:5px">
<label>{{ssLabel ss}}</label>
<!-- <input {{b "value: ssDefaultValue(val(field))"}} type="text" style="width: 100%;box-sizing: border-box;"> -->
<input {{val}} type="text" style="width: 100%;box-sizing: border-box;">
</div>
</div>
</template>

<template name="checkInput">
<div class="{{class}}" style="{{style}}">
<div style="padding:5px">
<label for="check-{{ss}}">{{ssLabel ss}}</label><br />
<input {{val}} {{name}} type="checkbox" id="check-{{ss}}" />
</div>
</div>
</template>

<template name="textareaInput">
<div class="{{class}}" style="{{style}}">
<div style="padding:5px">
<label>{{ssLabel ss}}</label>
<textarea {{val}} style="width: 100%;box-sizing: border-box;" cols="40"></textarea>
</div>
</div>
</template>

<template name="hero">
<div>
{{>textInput shared="pages" ss="layout.$.hero.title" val=(b "value: this.hero.title") style=""}}
{{>textInput shared="pages" ss="layout.$.hero.alignment" val=(b "value: this.hero.alignment") style=""}}
</div>
</template>

<template name="billboard">
<div>
{{>textInput shared="pages" ss="layout.$.billboard.title" val=(b "value: this.billboard.title") style=""}}
{{>textInput shared="pages" ss="layout.$.billboard.background" val=(b "value: this.billboard.background") style=""}}
</div>
</template>




<!-- <template name="demoVM">
<input {{b "value: val()"}} type="text" style="width: 100%;box-sizing: border-box;"> -->
Expand All @@ -39,10 +90,6 @@







<template name="basicForm">
<form id="hellojames">
<div id="name">
Expand All @@ -52,25 +99,6 @@
</form>
</template>


<template name="textInput">
<div class="{{class}}" style="{{style}}">
<div style="padding:5px">
<label>{{ssLabel}}</label>
<!-- <input {{b "value: ssDefaultValue(val(field))"}} type="text" style="width: 100%;box-sizing: border-box;"> -->
<input {{b "value: ssDefaultValue(val(field))"}} type="text" style="width: 100%;box-sizing: border-box;">
</div>
</div>
</template>
<template name="textareaInput">
<div class="{{class}}" style="{{style}}">
<div style="padding:5px">
<label>{{ssLabel}}</label>
<textarea {{b "value: ssDefaultValue(val(field))"}} style="width: 100%;box-sizing: border-box;" cols="40"></textarea>
</div>
</div>
</template>

<template name="dynamicForm">
<button {{b "click: add('hero','layout.$.hero')"}}>Add Hero</button>
<button {{b "click: add('billboard','layout.$.billboard')"}}>Add Billboard</button>
Expand All @@ -92,19 +120,3 @@
<hr />
</li>
</template>

<template name="hero">
<div>
<div>hero Item:</div>
<input {{b "value: this.hero.title"}} type="text">
<input {{b "value: this.hero.alignment"}} type="text">
</div>
</template>

<template name="billboard">
<div>
<div>billboard Item:</div>
<input {{b "value: this.billboard.title"}} type="text">
<input {{b "value: this.billboard.background"}} type="text">
</div>
</template>
151 changes: 65 additions & 86 deletions viewmodel-demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ JSON.flatten = function(data) {
return result;
};


function createTemplateObjFromSchema(schema, pick){
var ss;
if(pick){
Expand Down Expand Up @@ -79,17 +78,13 @@ var hero = new SimpleSchema({
var billboard = new SimpleSchema({
title: { type: String, label:"Title"},
background: { type: String, label:"Background"},
items: {type:[Object],label:"Items Group"},
'items.$.name': {type:String,label:"Item name"},
'items.$.number': {type:Number,label:"Items number"},
items2: {type:[String],label:"Items Group"},
'items2.$': {type:String,label:"Item String"},
});

TestSchema = new SimpleSchema({
title: {type: String, label:"Title", defaultValue:"defaulting"},
url:{type: String, label:"url", defaultValue:"undefined"},
body: {type: String, label:"Body", defaultValue:"defaulting"},
'test.test2': {type: String, label:"test2", defaultValue:"defaulting"},
active: {type: Boolean, label:"Active"},
layout: {type:[Object],label:"layout"},
'layout.$.item':{type:String, label: "Comp Name",defaultValue:"hello", allowedValues: ["hero","billboard"]},
'layout.$.hero':{type:hero, label: "Hero"},
Expand All @@ -102,42 +97,30 @@ if (Meteor.isClient) {
console.log("log: ", argument);
});

// localColl = new Mongo.Collection(null);
// localColl.insert({item:"hero", hero:{title:"hello moon", alignment: "left"}});
// localColl.insert({item:"billboard", billboard:{title:"What's your favorite bar?", background:"Twix"}});
// localColl.insert({item:"hero", hero:{title:"hello sun", alignment: "top"}});

Pages = new Mongo.Collection(null);
Pages.insert({
_id:"khds89g8",
title: "hello james",
body: "body text here",
test:{
test2: "yo yo"
},
layout:[
{_id:"gfds8089", item:"hero", hero:{title:"hello moon", alignment: "left"}},
{_id:"jhds8908", item:"billboard", billboard:{title:"What's your favorite bar?", background:"Twix"}},
{_id:"h8g9f090", item:"hero", hero:{title:"hello sun", alignment: "top"}}
]
// layout:[
// {_id:"gfds8089", item:"hero", hero:{title:"hello moon", alignment: "left"}},
// {_id:"jhds8908", item:"billboard", billboard:{title:"What's your favorite bar?", background:"Twix"}},
// {_id:"h8g9f090", item:"hero", hero:{title:"hello sun", alignment: "top"}}
// ]
});

var pagesShare;
pagesShare = JSON.flatten(Pages.findOne({}));
pagesShare.staticFormData = Pages.findOne({});
pagesShare.collection = Pages;
pagesShare.schema = TestSchema;

ViewModel.share({
pages: pagesShare,
pages: {
formData: Pages.findOne({}),
collection: Pages,
schema: TestSchema
},
utils:{
val(field){
console.log(field, this);
return this[field]();
},
ssLabel: function(){
var field = this.templateInstance.data.field;
return field, this.schema()._schema[field].label;
ssLabel: function(field){
return this.schema()._schema[field].label;
},
ssDefaultValue: function(liveValue){
if(liveValue){
Expand All @@ -146,83 +129,68 @@ if (Meteor.isClient) {
var field = this.templateInstance.data.field;
return this.schema()._schema[field].defaultValue || "";
}
},
updateStaticFormData(data){
var self = this;
clearTimeout(timer);
timer = setTimeout(function () {
console.log(self);
// self.load(self.staticFormData(JSON.unflatten(data)) );
}, 400);
}
}
});

var timer;
Template.demoVM.viewmodel({
tester(val, val2){
console.log(val,val2);
// var d = Pages.findOne({});
// Pages.update({_id:"khds89g8"}, d);
// var flat = {};
// flat[val] = "hello world";
//
// var d = this.staticFormData.value;

// d.layout.push({test:"hello"});
// this.staticFormData(d);
// console.log(this.staticFormData.value);

//
// this.staticFormData(Pages.findOne());
// console.log(Pages.findOne({}));
// var test = _.extendOwn(d,newData);
// console.log(this.staticFormData());
},
Template.myForm.viewmodel({
onCreated: function() {
this.load({share:['pages', 'utils']});
this.load({share:[this.templateInstance.data.shared, 'utils']});
var localColl = new Mongo.Collection(null);
var data = this.collection().findOne();
localColl.insert(data);
this.collection(localColl);
this.formData(data);
},
submit(){
console.log(this.data().staticFormData);
console.log(this.data().formData);
event.preventDefault();
}
});

Template.dynamicCompsForm.viewmodel({
onCreated: function() {
this.load({share:[this.templateInstance.data.shared, 'utils']});
},
layout(){
return Pages.findOne().layout;
},
add(){
Pages.update({_id:"khds89g8"}, this.staticFormData.value); // update current values
Pages.update({_id:"khds89g8"},{$push:{layout:{item:"hero"}}});
this.staticFormData(Pages.findOne());
console.log(this.staticFormData.value);
add(comp, schemaName){
// var objTml = createTemplateObjFromSchema(this.schema(), 'layout.$.hero').layout[0][comp];
this.collection().update({_id: this.formData()._id},this.formData.value); // update current values
this.collection().update({_id: this.formData()._id},{$push:{layout:{_id: Math.random(),item:comp,[comp]:{}}}});
this.formData(this.collection().findOne());
console.log(this.formData.value);
},
delete(id){
Pages.update({_id:"khds89g8"},this.staticFormData.value); // update current values
Pages.update({_id:"khds89g8"},{$push:{layout:{test:"test"}}});
var test = Pages.findOne();
this.staticFormData(test);
console.log(this.staticFormData.value);
delete(val){
this.collection().update({_id: this.formData()._id},this.formData.value); // update current values
this.collection().update({_id: this.formData()._id}, {$pull: {
'layout': {'_id': val}
}});
this.formData(this.collection().findOne());
console.log(this.formData.value);
}
});

Template.hero.viewmodel({
onCreated() {
this.load({share:['pages', 'utils']});
},
});

Template.billboard.viewmodel({
onCreated() {
this.load({share:['pages', 'utils']});
},
});

Template.basicForm.viewmodel({
Template.textInput.viewmodel({
onCreated: function() {
this.load({share:[this.templateInstance.data.shared, 'utils']});
},
submit(){
console.log(this.data(),this.formData().findOne({}));
event.preventDefault();
}
});

Template.textInput.viewmodel({
Template.checkInput.viewmodel({
onCreated: function() {
this.load({share:[this.templateInstance.data.shared, 'utils']});
},
// onRendered(){
// console.log(this);
// }
}
});

Template.textareaInput.viewmodel({
Expand All @@ -231,6 +199,17 @@ if (Meteor.isClient) {
}
});

Template.basicForm.viewmodel({
onCreated: function() {
this.load({share:[this.templateInstance.data.shared, 'utils']});
},
submit(){
console.log(this.data(),this.formData().findOne({}));
event.preventDefault();
}
});


//TODO on create of this template create a localCollection and add only the needed field into it
// this.formData().find({},{fields:{layout:1}})

Expand Down

0 comments on commit 670edc7

Please sign in to comment.