Develop Reference

How to render unknown/variable number of React elements

I have this React component that looks like this:
var TestResult = React.createFactory(React.createClass({
displayName: 'test-result',
getInitialState: function getInitialState() {
return {
active: false,
testLines: [] //this value will update after AJAX/WebWorker completes
};
},
makeNewState: function makeState(data) {
this.setState(data);
},
componentDidMount: function () {
var self = this;
var testPath = this.props.testPath;
setTimeout(function(){
$.get(testPath).done(function (msg) {
var myWorker = new Worker('/js/workers/one.js');
myWorker.postMessage(msg);
myWorker.onmessage = function (msg) {
self.setState({testLines: msg.data.testLines});
};
}).fail(function (err) {
console.error(err);
});
}, Math.random()*2000);
},
render: function() {
var self = this;
return React.createElement('p', {
className: this.state.active ? 'active' : '',
onClick: this.clickHandler,
},
self.state.testName, ' ', self.state.testLines, React.createElement('b', null, 'Pass/fail')
);
}
}));
what I want is to render a variable number of components in the render function - the variable number is related to number of elements in the testLines array.
So, in order to do that, I might try changing the render method above:
render: function() {
var self = this;
return React.createElement('p', {
className: this.state.active ? 'active' : '',
},
self.state.testName, ' ', React.createElement('div', self.state.testLines, React.createElement('b', null, 'Pass/fail')
);
}
so what I am trying to do is pass testLines, which is an array of React.createElement results, to React.createElement. Is this the correct way of doing it? "It" meaning rendering a variable number of React elements.

What you have to do is map over the array and create each of the sub-elements, then render those:
render: function() {
var lines = this.state.testLines.map(function(line, i) {
// This is just an example - your return will pull information from `line`
// Make sure to always pass a `key` prop when working with dynamic children: https://facebook.github.io/react/docs/multiple-components.html#dynamic-children
return (
<div key={i}>I am a line!</div>
);
});
return (
<div id='lineContainer'>
{lines}
</div>
);
};

Meteor + polymer without blaze

I'm trying to use meteor + polymer without blaze templating.
I make this behavior:
MeteorBehavior = {
properties: {
isReady: {
type: Boolean,
value: false,
notify: true
},
currentUser: {
type: Object,
value: null,
notify: true
}
},
ready: function () {
var self = this;
self.subscriptions.forEach(function(itm){
itm = $.type(itm) == 'array' ? itm : [itm];
itm[itm.length] = function () {
self.isReady = true;
};
Meteor.subscribe.apply(null, itm);
});
Meteor.startup(function () {
Tracker.autorun(function(){
self.currentUser = Meteor.user();
});
Tracker.autorun(self.autorun.bind(self));
});
},
subscriptions: [],
autorun: function() { }
};
And i use it:
(function () {
Polymer({
is: 'posts-list',
posts: [],
behaviors: [MeteorBehavior],
autorun: function(){
this.posts = Posts.find().fetch();
},
subscriptions: ['posts']
});
})();
Is it good solution? And how i can animate data changing without blaze uihooks?

Getting a "Object doesn't support property or method ;Save;" when trying to save a Backbone.js model

I'm new to Backbone and am currently trying to get the Save() method working on my individual models. I have everything else working at the moment, but when I call Save() on an individual item it tells me that the method doesn't exist. Any ideas? Thanks in advance.
Code:
var Root = this;
//MODELS
var Option = Backbone.Model.extend({});
var BooleanOption = Option.extend({
initialize: function () {
this.constructor.__super__.initialize.apply(this, arguments);
if (this.get("ValueAsString") === "Y") { this.set("IsChecked", true); };
},
IsChecked: false
});
var SelectOption = Option.extend({
initialize: function () {
this.constructor.__super__.initialize.apply(this, arguments);
this.set("Options", this.get("ValidationValue").split(","));
},
Options: []
});
var TextOption = Option.extend({
initialize: function () {
this.constructor.__super__.initialize.apply(this, arguments);
this.set("MaxLength", Number(this.get("ValidationValue").replace("x", "")));
},
MaxLength: null
});
//main collection model
var OptionsCollection = Backbone.Collection.extend({
model: function (attr, options) {
switch (attr.ValidationType) {
case "B":
return new BooleanOption(attr, options);
break;
case "O":
return new SelectOption(attr, options);
break;
case "C":
return new TextOption(attr, options);
break;
default:
return new Option(attr, options);
break;
}
},
urlBase: "http://localhost:40217/Shared/Options.svc/",
url: function () {
return this.urlBase + Root.getParam("ModuleID") + "?true";
}
});
//END MODELS
//VIEWS
var OptionView = Backbone.View.extend({
render: function (eventName) {
}
})
var BooleanOptionView = OptionView.extend({
initialize: function () {
this.listenTo(this.model, "change", this.render);
},
render: function (eventName) {
$("#content").append(this.el);
$(this.el).html(_.template($('#boolean-option-template').html(), this.model));
return this;
},
events: {
"change .chkBox": "test"
},
test: function () {
alert("valueChanged");
}
});
var SelectOptionView = OptionView.extend({
initialize: function () {
this.listenTo(this.model, "change", this.render);
},
render: function (eventName) {
$("#content").append(this.el);
$(this.el).html(_.template($('#select-option-template').html(), this.model));
return this;
},
events: {
"change .selectOption": "test"
},
test: function () {
alert("valueChanged");
}
});
var TextOptionView = OptionView.extend({
initialize: function () {
this.listenTo(this.model, "change", this.render);
},
render: function (eventName) {
$("#content").append(this.el);
$(this.el).html(_.template($('#text-option-template').html(), this.model));
return this;
},
events: {
"change .textOption": "test"
},
test: function () {
alert("valueChanged");
}
});
var MainView = Backbone.View.extend({
render: function (eventName) {
$("#content").append(this.el);
$(this.el).html(_.template($('#main-template').html(), this.model));
_.each(this.model.models, function (opt) {
if (opt.get("ValidationType") === "B") {
new BooleanOptionView({ model: opt }).render();
}
else if (opt.get("ValidationType") === "C") {
new TextOptionView({ model: opt }).render();
}
else if (opt.get("ValidationType") === "O") {
new SelectOptionView({ model: opt }).render();
}
}, this);
return this;
},
events: {
"click .saveBtn": "saveOptions"
},
saveOptions: function () {
_.each(this.model.models, function (mod) {
mod.Save(mod.attributes);
})
}
});
//END VIEWS
$(document).ready(function () {
var oc = new OptionsCollection();
oc.fetch({
success: function () {
$("#content").append(new MainView({model:oc}).render().el);
}
});
});
function getParam(sname) {
var params = location.search.substr(location.search.indexOf("?") + 1);
var sval = "";
params = params.split("&");
// split param and value into individual pieces
for (var i = 0; i < params.length; i++) {
temp = params[i].split("=");
if ([temp[0]] == sname) { sval = temp[1]; }
}
return sval;
}

Javascript is case sensitive.
mod.save(mod.attributes); // Instead of mod.Save

Javascript: Mixing constructor pattern and Revealing Module Pattern

Is there any way I can do have a Javascript class that extends an object that was created through the revealing module pattern? I tried the following code, but is there away to achieve the same thing?
sv.MergeQuestionViewModel = function () {
this = sv.QuestionDetailViewModal();
this.init($("#mergeQuestionModel"));
};
sv.QuestionDetailViewModal = function () {
var $el,
self = this,
_question = ko.observable(),
_status = new sv.Status();
var _init = function (el) {
$el = el;
$el.modal({
show: false,
backdrop: "static"
});
};
var _show = function () {
$el.modal('show');
};
var _render = function (item) {
_question(new sv.QuestionViewModel(item));
_show();
};
var _reset = function () {
_question(null);
_status.clear();
};
var _close = function () {
$el.modal('hide');
_reset();
};
return {
init: _init,
show: _show,
render: _render,
reset: _reset,
close: _close
};
};

You could use jQuery.extend to achive this behaviour.
sv.MergeQuestionViewModel = function () {
$.extend(this, sv.QuestionDetailViewModal);
this.init($("#mergeQuestionModel"));
};
sv.QuestionDetailViewModal = (function () {
var el,
_init = function($el) {
el = $el;
console.log('init', el);
},
_render = function() {
console.log('render', el);
};
return {
init : _init,
render : _render
};
}());
var view = new sv.MergeQuestionViewModel();
view.render();
Test it on http://jsfiddle.net/GEGNM/

OO(object-oriented) javascript

I've a fair amount of experience with JavaScript, and for this new project I'm on (cms for blog with notions of profitability) I thought I'd step it up and write the JavaScript in an MVC fashion. I've been using a bit of backbone and underscore, but it isn't clicking mentally. any way, I've written a bit of code to handle some events/effects but it just doesn't work. If anyone could sort me out I'd really appreciate it.
// Semi Perfect grade 0 JS - Golden age
//partial View Objects | Events
var pshare_dock = {
actor: $("#share_dock"),
drag: function () {
this.actor.draggable();
}
}
pshare_dock.expand = function () {
this.actor.dblclick(function () {
$(this).toggleClass("share_close");
});
}
var pmenu = {
hover: function () {
$("ul.drop li.drop").hover(function () {
$(this).find('ul').fadeIn(1);
}, function () {
$(this).find('ul').hide();
})
},
navigate: function () {
$("a.ajx").click(function (e) {
var link;
var container = $("#content_pane");
e.preventDefault();
link = $(this).attr("href") + "#content_pane";
container.load(link);
})
}
}
var pcontent_pane = {}
var ppost = {}
var pdatabase_entry = {}
//Views
var Homepage = function () {
this.share_dock = function () {
new pshare_dock();
}
this.menu = function () {
new pmenu();
}
this.content_pane = function () {
new pcontent_pane();
}
this.posts = function () {
new ppost();
}
}
//Controller
var GoldenAgeRouter = Backbone.Router.extend({
routes: {
"!/": "defaultRoute",
"*actions": "defaultRoute"
},
defaultRoute: function (actions) {
var homeView = function () {
new Homepage();
}
}
})
$(document).ready(function () {
var Golden_age = function () {
new Homepage();
}
})
the question is essentially what all is wrong with this?

You're wrapping your instantiations in an anonymous function but not invoking them:
var Golden_age = new Homepage(); // Invoked.
var Golden_age = function(){ new Homepage(); } // Stored function, not invoked.