Ember.js parent/child relationships - ember.js

I have the following data structure for a simple messaging app:
App.Message = DS.Model.extend({
title: DS.attr("string"),
body: DS.attr("string"),
isRead: DS.attr("boolean"),
replyTo: DS.belongsTo("App.Message")
});
App.Message.FIXTURES = [{
id: "1",
title: "Eos ut amet persius, ea ius nibh iudico",
body: "Lorem ipsum dolor sit amet, nam et hinc doctus alienum, in vel latine conceptam.",
isRead: true,
replyTo: null
},
{
id: "2",
title: "Ad est dolor veniam delenit.",
body: "Lorem ipsum dolor sit amet, nam et hinc doctus alienum, in vel latine conceptam.",
isRead: false,
replyTo: "1"
},
{
id: "3",
title: "Eu nec summo placerat reprehendunt.",
body: "Lorem ipsum dolor sit amet, nam et hinc doctus alienum, in vel latine conceptam. Tale eirmod omittantur sit ne. Minim noster philosophia per eu, mel putent veritus an, ex veniam ubique consulatu has. At stet diceret repudiare ius, probo liber diceret no est. Ridens efficiantur vim te.",
isRead: false,
replyTo: "1"
}];
I am trying to display replies to a message when it is selected but none are appearing. The message subject and body are displaying fine so I know my routes, controllers and templates are set up correctly for the parent entity at least.
Here are my templates (with almost all markup removed for brevity):
<script type="text/x-handlebars" data-template-name="message">
<h2>{{ title }}</h2>
<p>{{ body }}</p>
{{ render "messageResponses" responses }}
</script>
<script type="text/x-handlebars" data-template-name="messageResponses">
{{#each responses}}
<p>{{ body }}</p>
{{/each}}
</script>
And my Message controller (the part I'm probably doing wrong):
App.MessageController = Ember.ObjectController.extend({
responses: function() {
return App.Message.find({ replyTo: this.get("id") );
}
});

Try findProperty instead:
App.MessageController = Ember.ObjectController.extend({
responses: function() {
return App.Message.findProperty('replyTo', this.get("id"));
}
});

Related

swiftui TextView with action text

Hi everyone I am creating a text editor and I would like to know if there is the possibility to insert a Uibutton in the middle of the text. I am not referring to a url but to a real button.
For now I am creating the editor with a UIViewRepresentable and then with a regex I look for the part of the text to be transformed
Lorem ipsum dolor sit amet, <button id = "4"> consectetur adipiscing elit. Maecenas ornare </button> eget sapien vel gravida.
My goal is to transform the text between the <button> tag into a UIButton or in any case into a tappable text that can perform an action. To understand the equivalent of
Button (action: {
self.mode = "normal"
}) {
Text ("title")
}
some idea? Is it possible to achieve this?
Thank you!

Dynamic segments for route on index in ember

I have an error when I try to get to URL "/posts" in my Ember app. I get a following error:
Uncaught Error: More context objects were passed than there are dynamic segments for the route: posts.index
Which is really puzzling, because there is no dynamic segment for index, my routes look like this:
Router.map(function() {
this.route('posts', function() {
this.route('new');
this.route('show', {
path: ':post_id'
});
});
});
part of the model (models/posts.js):
import DS from 'ember-data';
let Post = DS.Model.extend({
title: DS.attr('string'),
author: DS.attr('string'),
content: DS.attr('string')
});
Post.reopenClass({
FIXTURES: [
{
id: 1,
title: "Random text",
author: "Someone new",
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium aspernatur quam qui commodi beatae placeat ducimus aliquam veritatis ullam sed! Sit assumenda aspernatur sunt harum accusamus, repellat labore! Repellendus, corporis!"
}
]
});
export default Post;
My link which I use to get to /posts:
{{link-to 'Posts' 'posts'}}
Additional info: I am using ember-cli-cordova, so my environment.js contains "defaultLocationType: 'auto'" and I am also using fixtures, so I have a following adapter:
export default DS.FixtureAdapter.extend({
host: config.apiUrl
});
Does anybody see any problem which would cause the error? Thank you in advance.
EDIT:
My post route (routes/posts/index.js) looks like this:
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.findAll('post');
}
});
When I comment out the line where I am getting data from the store, everything works fine, so it looks that the problem is somehow connected with the usage of fixtures maybe. I'll try to create the minimum example on ember jsBin, when I get home.
It was a silly typo at the end - from the error message, I was focusing on the model and route of the index and forgot on a template itself. There is an "each" iterator in which I am creating a link to a detail of the post and there was a typo in a link-to, I had "{{#link-to "posts" post}}" instead of "{{#link-to "posts.show" post}}".
You should use {{link-to 'posts'}} instead of {{link-to 'Posts' 'posts'}}, because you don't have dymanic segments in posts route.

Zurb Foundation 4 How to maintain columns when printing

I am using Foundation 4.2.3 from Zurb, but when I print pages, the grid layout is always not maintained.
For example,
<div class="row">
<div class="small-3 columns">
XXX
</div>
<div class="small-9 columns">
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</div>
</div>
This renders as
but it becomes this when printed.
Is there a fix to this so that the grid layout is maintained?
I added this to my .scss file at the end:
#media print {
div.columns {
float:left!important;
padding-left:0.9375em!important;
padding-right:0.9375em!important;
width:8.3333333333%!important;
}
}
The issue ist that ".large-XXX .columns" in the grid is only defined for "#media screen":
foundation/_variables.scss:98
$small: "only screen and (min-width: #{$small-screen})";
foundation/components/_grid.scss:153
#media #{$small} {
#for $i from 1 through $total-columns {
.large#{-$i} { #include grid-column($columns:$i,$collapse:null,$float:false); }
}
...
}
So what I did was add a line after foundation/_variables.scss is included that overrides this:
// This includes all of the foundation global elements that are needed to work with any of the other files.
#import "foundation/variables";
$small: "screen and (min-width: #{$small-screen}), print";
Of course, this only works if you don't auto-include all of foundation by way of #import "foundation", but instead include all of them manually (i.e., uncomment the respective lines in _foundation.scss).
I did this in the variables.scss file for Foundation 5, although it's not perfect.
// $screen: "only screen";
$screen: "print, screen";

The text in the middle of post box

How I can put text in the middle of post box. I posting this post by Graph API
facebook_access_token.post("/me/feed", {
:message => "Lorem ipsum dolor sit amet",
:name => "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
:link => 'http://heiaheia.com',
:description => ' ',
:picture => 'http://images.apple.com/downloads/dashboard/justforfun/images/earth_20090309105503.jpg'
})
If you mean vertically align it in the middle, then its not possible. Its box has a minimum height as you see.

"Cannot call method 'extend' of undefined" when creating a view

I'm having my first play around with Ember.js, and am falling at the first hurdle. Been trying for ages to get this to work, but I keep getting the error "Cannot call method 'extend' of undefined "
In my HTML I have this:
<script type="text/x-handlebars">
{{#view App.MainView}}
<div class="hero-unit">
<h1>{{blogTitle}}</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non neque a eros dapibus posuere. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
{{/view}}
</script>
And in my JS I have this:
var App = Ember.Application.create();
//define main view
App.MainView = Ember.View.extend({
blogTitle: 'Epic Blog'
});
According to the docs, this should just render the template fine, but no matter hoe hard I try I get the error...
Anyone know what I'm doing wrong?
What Ember.js version are you using? I've created a JSFiddle with your code using Ember.js 0.9.8.1 and it works, see http://jsfiddle.net/pangratz666/D3VuA/.
Also, you have to declare App as global variable by omitting the var. This is needed so bindings and paths in the templates work:
App = Ember.Application.create();
...