I'm trying to separate data per partials so that the data doesn't mix/overwrite globally.
The problem is that the main template does not re-render when partial's data changes.
The best I've accomplished so far is to get the partial to re-render in the main container, but not within the main template itself.
Am I missing something?
Here's the code (also on JS Bin):
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
</head>
<body>
<div id="main"></div>
</body>
</html>
JS:
var partial = new Ractive({
template: '{{name.first}} {{name.last}}',
oninit: function () {
this.observe( function ( newValue, oldValue, keyPath ) {
console.info( 'newValue = %o, oldValue = %o, keyPath = %s', newValue, oldValue, keyPath );
});
},
data: {
name: {
first: 'John',
last : 'Doe'
}
}
}),
main = new Ractive({
el: '#main',
// template: 'Hello {{name}}!',
template: 'Hello {{>partial}}!',
partials: {
partial: function ( p ) {
// 1) Not working...
// return '{{name.first}} {{name.last}}';
// 2) ...also not working...
// return partial.template;
// 3) ...still not working...
// return ( p.isParsed( partial.template ) ) ? partial.template : p.parse( partial.template );
// 4) Kind of working... (static - does not re-render)
// return partial.toHTML();
// 5) Kind of working... (returning Promise!)
return partial.render( this.el );
}
},
data: {
name: 'John Doe'
}
});
// partial.set( 'name.first', 'Jane' );
You have two ways to do this. First, you can still use partials, but you force the context of the partial. Note, however, that the data will still reside in the same instance. In the following example, the partial picks up "John Doe" as data. But in the second partial usage, we force the jane object to it, making it use first and last from jane.
var main = new Ractive({
el: '#main',
template: 'Hello {{>personPartial john}} and {{>personPartial jane}}!',
partials: {
personPartial: '{{first}} {{last}}'
},
data: {
first: 'John',
last : 'Doe',
jane: {
first: 'Jane',
last : 'Dee'
}
}
});
main.set( 'jane.name.first', 'Jen' );
If you really total separation of the data, consider using components instead. In this case John and Jane are their own components. Note however, that if a component is missing data (like say John didn't have first), it will look into the parent (main) for that data. If it happens to be there, it will use that (in this case foo). You can use isolated:true to prevent this behavior, like in Jane. You can also explicitly pass data from the parent to the child by way of attributes.
var John = Ractive.extend({
template: 'Hello {{first}} {{last}}!',
data: {
last: 'Doe'
}
});
var Jane = Ractive.extend({
isolated: true,
template: 'Hello {{first}} {{last}}!',
data: {
first: 'Jane',
}
});
var Jay = Ractive.extend({
isolated: true,
template: 'Hello {{first}} {{last}}!'
});
var main = new Ractive({
el: '#main',
template: 'Hello {{>person}}! <john /> <jane /> <jay first="{{first}}" last="{{last}}" />',
partials: {
person: '{{first}} {{last}}'
},
components: {
john: John,
jane: Jane,
jay: Jay
},
data: {
first: 'foo',
last: 'bar'
}
});
Related
ref this jsfiddle
html:
<main />
<div id='result' />
code:
window.ractive = new Ractive({
el: 'main',
template: '<p>a thing called {{thing}}</p>',
computed: { thing : function(){return "kablooie"} }
});
$('#result').html(JSON.stringify(ractive.get()))
The ractive.get() here does return the value of the attribute "thing". Even though the docs say that computed attributes are not returned by get().
Is this intentional behaviour or a bug?
In edge Ractive (will be 0.8) which you are using, we added the computed and mapped properties to the root get via ractive.get() as a feature request.
See this issue for current proposal to be able to get only the root data object via ractive.get('.'), which would mean:
window.ractive = new Ractive({
el: 'main',
data: { foo: 'foo' },
template: '<p>a thing called {{thing}}</p>',
computed: { thing : function(){return "kablooie"} }
});
console.log( JSON.stringify( ractive.get() ) );
// { foo: 'foo', thing: 'kablooie' }
console.log( JSON.stringify( ractive.get('.') ) );
// { foo: 'foo' }
I am passing data from one component to another (MyApplicants) via my router (FlowRouter):
FlowRouter.route('/applicants', {
name: 'Applicants',
action: function () {
var currentUser = Meteor.user();
ReactLayout.render(App, {
content: <MyApplicants institutionID={Meteor.user().profile.institutionID} />,
nav: <Nav />,
header: <Header />
});
}
});
As you can see I'm passing institutionID to the new component via a prop in the router. I know that the institutionID is being passed because I can see it in the render of the MyApplicants component.
Here is the MyApplicants component:
MyApplicants = React.createClass({
mixins: [ReactMeteorData],
pagination: new Meteor.Pagination(Applicants, {
perPage: 25,
filters: {institution_id: this.props.institutionID },
sort: {institution_id: 1, "last_name":1, "first_name":1}
}),
getMeteorData() {
return {
currentUser: Meteor.user(),
applicants: this.pagination.getPage(),
ready: this.pagination.ready()
}
},
RenderApplicantRow(applicant, key) {
return (
<div key={key}>
<p>[{applicant.institution_id}] {applicant.last_name}, {applicant.first_name}</p>
</div>
)
},
render : function () {
return (
<div>
<section className="content">
{this.data.applicants.map(this.RenderApplicantRow)}
{console.log(this.data.applicants)}
<DefaultBootstrapPaginator
pagination={this.pagination}
limit={6}
containerClass="text-center"/>
</section>
</div>
)
}
});
(FYI, I'm using krounin:pagination.) The problem is that I cannot access this.props.institutionID inside of the pagination component. I know the value is getting passed (I can see it if I'm just testing output in the render) but can't figure out why it doesn't pass into the pagination call. And I know the pagination works because I do not get an error if I hard code in a value.
Thanks for the help.
This is a simple scope problem I think, you need to bind it to the right context
Try something like this:
pagination: function() {
var self= this;
new Meteor.Pagination(Applicants, {
perPage: 25,
filters: {institution_id: self.props.institutionID },
sort: {institution_id: 1, "last_name":1, "first_name":1}
})
}
,
I'm creating a chat app. I hope i can add a new "hello" message if i check the messages count of current chat is equal to 0 (Problem #1). Also i have a dictionary as a collection for translation. But t() returns EN variant (Problem #2)
t = function(text) {
var res = Dictionary.findOne({o:text});
return res && res.t || text;
}
Meteor.startup(function () {
Deps.autorun(function () {
Meteor.subscribe('dictionary', Session.get('lang'), function(){
Session.set('dictionaryReady', true);
});
Meteor.subscribe('chats', Session.get('domain'), function(){
if (chatCurrent(Meteor.userId(), Session.get('domain')).count()===0 //true, even is not actually [problem_#1]
&& Session.get('dictionaryReady') //true, but next function t() doesn't work properly [problem #2]
) {
var mudata = Session.get('my_manager') ? udata(Session.get('my_manager'), Session.get('domain')) : null,
hello = mudata && mudata.hello || t('Hello! How I can help you?'),
name = mudata && mudata.name || t('Anna');
Meteor.call('create_message', {chat: Meteor.userId(), to: Meteor.userId(), text: hello, name: name, from: Session.get('my_manager'), domain: Session.get('domain'), last_manager: Session.get('my_manager')});
});
});
});
Problem #1 and Problem #2 everytime when page just loaded. So when i refresh the page i get another "hello message" on default EN locale.
Here is how you can render your template only once your subscriptions are ready. This is a solution taken from meteor kitchen generated code.
first you create a "loading" template
<template name="loading">
<div class="loading">
<i class="fa fa-circle-o-notch fa-4x fa-spin"></i>
</div>
</template>
Second, attach to your template a route controller. Here is a simplified version of it (but it should work):
this.myTemplateController = RouteController.extend({
template: "myTemplate",
onBeforeAction: function() {
this.next();
},
action: function() {
if(this.isReady()) { this.render(); } else { this.render("loading"); }
},
isReady: function() {
var subs = [
Meteor.subscribe("sub1", this.params.yourParam),
Meteor.subscribe("sub2", this.params.yourParam),
Meteor.subscribe("sub3", this.params.yourParam)
];
var ready = true;
_.each(subs, function(sub) {
if(!sub.ready())
ready = false;
});
return ready;
},
data: function() {
return {
params: this.params || {},
yourParamWhatever: Chat.findOne({_id:this.params.yourParam}, {})
};
},
});
Now you should have all your subscriptions ready when your template is loaded.
Concerning the translation, you could have a look at TAPi18n package that I highly recommend. It is quite easy to implement.
I am trying to bind iframe and parent window so that I can change/update an observable in either the iframe or parent window and both views will update with new value.
Here is working sample: http://jsfiddle.net/NnT78/26/
I have tweaked some sample code that I have found and have it working great as follows;
HTML:
<iframe src="http://fiddle.jshell.net/zVPF8/11/show/" data-bind="bindIframe: $data"></iframe>
But when I put the same html in a foreach bind it get an error;
HTML:
<ul data-bind="foreach: iframes">
<li>
<iframe data-bind="attr: {src: src}, bindIframe: $data"></iframe>
</li>
</ul>
Error:
Uncaught ReferenceError: Unable to parse bindings.
Bindings value: text: someProperty
Message: someProperty is not defined
Here is my Knockoutjs ViewModel code;
ko.bindingHandlers.bindIframe = {
init: function(element, valueAccessor) {
function bindIframe() {
try {
var iframeInit = element.contentWindow.initChildFrame,
iframedoc = element.contentDocument.body;
} catch(e) {
// ignored
}
if (iframeInit)
iframeInit(ko, valueAccessor());
else if (iframedoc){
ko.applyBindings(valueAccessor(), iframedoc);
}
};
bindIframe();
ko.utils.registerEventHandler(element, 'load', bindIframe);
}
};
function ViewModel() {
var self = this;
self.someProperty = ko.observable(123);
self.clickMe = function(data, event) {
self.someProperty(self.someProperty() + 1);
}
self.anotherObservableArray = ko.observableArray([
{ name: "Bungle", type: "Bear" },
{ name: "George", type: "Hippo" },
{ name: "Zippy", type: "Unknown" }
]);
self.iframes = ko.observableArray([
{ src: "http://fiddle.jshell.net/zVPF8/6/show/", type: "Bear" },
{ src: "http://fiddle.jshell.net/zVPF8/6/show/", type: "Hippo" },
{ src: "http://fiddle.jshell.net/zVPF8/6/show/", type: "Unknown" }
]);
};
// Bind outer doc
ko.applyBindings(new ViewModel());
See http://jsfiddle.net/NnT78/26/ for sample of single iframe working and dynamic iframes in foreach bind not working.
Thanks in advance!
When in a foreach binding, $data is different; it's the current item in the array. You can fix your example by changing the iframe to bind to $root instead.
<iframe data-bind="attr: {src: src}, bindIframe: $root"></iframe>
http://jsfiddle.net/mbest/NnT78/29/
I have a form with a select populated with options. I want to bind it to a model using backbone.stickit but the documentation show how to populate the select on the binding configuration. I can't found an easy way to bind the model with my prepopulated select.
This is my html
<div id="main">
<form id="formulario">
<input id="test1" type="text" />
<select id="test2">
<option value="0">a</option>
<option value="1">b</option>
</select>
</form>
<div id="value-test1"></div>
<div id="value-test2"></div>
</div>
This is a working example based on the documentation, but not what I need
var Model = Backbone.Model.extend({});
var View = Backbone.View.extend({
el: $('#main'),
bindings: {
'#test1': 'test1',
'#value-test1': 'test1',
'#test2': {
observe:'test2',
selectOptions: {
collection: function() {
return [
{value: 0, label:'a'},
{value: 1, label:'b'}
];
}
}
},
'#value-test2': 'test2'
},
render: function() {
this.stickit();
}
});
var model = new Model({test1: 'test', test2: 0});
var view = new View({model: model}).render();
http://jsfiddle.net/camilosw/nDjHh/
I tried to obtain the option values from the select on the binding configuration using jquery but doesn't work
var Model = Backbone.Model.extend({});
var View = Backbone.View.extend({
el: $('#main'),
bindings: {
'#test1': 'test1',
'#value-test1': 'test1',
'#test2': {
observe:'test2',
selectOptions: {
collection: function() {
options = $("#test2 option").map(function(){
return {value: this.value, label: this.text};
}).get();
return options;
}
}
},
'#value-test2': 'test2'
},
render: function() {
this.stickit();
}
});
var model = new Model({test1: 'test', test2: 0});
var view = new View({model: model}).render();
http://jsfiddle.net/camilosw/2EYV7/2
It worked, but I think it will be a mess on forms with many selects
window.options = $("#test2 option").map(function(){
return {value: this.value, label: this.text};
}).get();
var Model = Backbone.Model.extend({});
var View = Backbone.View.extend({
el: $('#main'),
bindings: {
'#test1': 'test1',
'#value-test1': 'test1',
'#test2': {
observe:'test2',
selectOptions: {
collection: function() {
return window.options;
}
}
},
'#value-test2': 'test2'
},
render: function() {
this.stickit();
}
});
var model = new Model({test1: 'test', test2: 0});
var view = new View({model: model}).render();
http://jsfiddle.net/camilosw/Y3aEF/1
What is the best way to bind a prepopulated select to a model?
I tried only with backbone.stickit, it's easier with another library?
Stickit actually binds values as data to select-options instead of using the value html attribute. The reasoning behind this is that in rich apps, you often want to use different types of data for option values. For example, you may want an option to represent a JavaScript Object or Array which is not an easy value to serialize to an html attribute; or you may want to assign the attribute value to the Number 2, but because of type coercion when it is saved as an attribue it will be converted to the String "2". Also, since Stickit is going to parse/own the select-options, it makes sense to let Stickit render the options instead of rendering/processing it in two places (not to mention iterating in a template is ugly).
That said, this request is common enough that I'm convinced to support pre-rendered select-options. Can you open a new issue, and I'll get something out on master within the next couple of days?
EDIT: This is being actively worked on, now.