I'm following the ember tutorial at http://emberjs.com/guides/. My issue happens when they add the following to app.js.
App.PostsRoute = Ember.Route.extend({
model: function() {
return myPosts;
}
});
Before I add this, the ember inspector does not have any problems. After I add this, the ember inspector tells me "Ember application not detected."
The code in my index looks like this. It is taken directly from the video.
<script type="text/x-handlebars" id="posts">
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<table class='table'>
<thead>
<tr><th>Recent Posts</th></tr>
</thead>
{{#each model}}
<tr><td>
{{#link-to 'posts' this}}{{title}} <small class='muted'>by {{author.name}}</small>{{/link-to}}
</td></tr>
{{/each}}
</table>
</div>
<div class="span9">
{{outlet}}
</div>
</div>
</div>
</script>
Thanks
Related
I have an enduro.js blog based on this tutorial:
https://www.endurojs.com/blog/how-to-make-a-blog-with-endurojs
And I want to add navbar and footer as external .html files available on some URL. How can I include some navbar url into following code which is component "header.hbs":
<header>
<div class="inner">
<h1>{{global.site_name}}</h1>
{{#if global.site_description}}
<p>{{global.site_description}}</p>
{{/if}}
</div>
</header>
<nav class="aSiteNav" id="navbarDiv">
<div class="inner">
{{#if global.show_archive_link}}
{{global.archive_link_text}}
{{/if}}
{{#navlinks}}
{{#each this}}
{{this.content.navigation_title}}
{{/each}}
{{/navlinks}}
</div>
</nav>
I solved it by including jquery:
<header>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#navbar").load("https://mydomain.xyz/navbar.html");
});
</script>
<div class="inner" id="navbar">
</div>
</header>
You can try something like this
<header>
<iframe id="inlineFrameExample" src="{{url_of_your_header}}"></iframe>
</header>
I'm working on a Ractive js component that represents a table. It works ok but recently I added some functionality: filters, status bar, left column checkboxes, table header. This table component is used throughout the application everywhere.
The problem is that in different places I need only some combination of these functions. In the current implementation I have a lot of ifs in the template and I want to get rid of them.
At the moment I want to use the decorator pattern but have no idea how to implement this especially with the fact that I need to mess with the core table template.
Table template:
{{#if status_bar}}
<table class="list-status">
<tbody>
<tr>
<td><input type="checkbox" checked="{{.select_all}}"></td>
<td>
{{#if has_filters}}
<span>Показать:</span>
{{#each filters:i}}
<button on-tap="#this.fire('activateFilter', event, i)" {{#if active}}class="active"{{/if}}>{{title}}</button>
{{/each}}
{{/if}}
{{#if ready}}
<span class="badge lists-badge">{{ collection.total_count }}</span>
{{#if selected.length > 0}}
<span class="badge lists-badge" style="background-color: red;">{{ selected.length }}</span>
{{/if}}
{{/if}}
</td>
</tr>
</tbody>
</table>
{{/if}}
<table class="{{class}}">
{{#if header}}
<thead>
<tr>
{{^hideSelectColumn}}
<th></th>
{{/hideSelectColumn}}
{{#each titles}}
<th class={{class}}>{{title}}</th>
{{/each}}
</tr>
</thead>
{{/if}}
<tbody>
{{#if ready}}
{{#each diff_create:i}}
<tr class="just-created">
{{^hideSelectColumn}}
<td class="{{firstColumnClass}}">
<div style="position: relative;"></div>
</td>
{{/hideSelectColumn}}
{{>pending}}
</tr>
{{/each}}
{{#if diff_create.length > 0}}
<tr>
<td colspan={{column_count}}></td>
</tr>
{{/if}}
{{#each page_models}}
<tr {{#if mfd}} class='mfd' {{/if}}>
{{^hideSelectColumn}}
<td class="{{firstColumnClass}}">
<input type="checkbox" class="list-checkbox" name='{{selected}}' value='{{#index}}'/>
<div style="position: relative;"></div>
</td>
{{/hideSelectColumn}}
{{>content}}
</tr>
{{/each}}
{{^page_models}}
<tr>
<td style='text-align:center; font-weight: bold; font-size: 15px' colspan={{column_count}}>Пусто!</td>
</tr>
{{/}}
{{/if}}
{{^ready}}
<tr>
<td style='text-align:center; font-weight: bold; font-size: 15px' colspan={{column_count}}>Загрузка...</td>
</tr>
{{/ready}}
</tbody>
</table>
<div class="pages">
{{#if pages_more_than_one}}
<ul class="pagination">
{{#if has_prev_page}}
<li class="arrow-left"><a on-tap='prevPage'><span class="icon-arrow-left4"></span></a></li>
{{/if}}
{{#each pages}}
<li class='{{#index+1==current_page ? "active": ""}}'><a on-tap='#this.fire("goToPage", #index+1)'>{{#index+1}}</a></li>
{{/each}}
{{#if has_next_page}}
<li class="arrow-right"><a on-tap='nextPage'><span class="icon-arrow-right8"></span></a></li>
{{/if}}
</ul>
{{/if}}
<div class="pages-count">
<select class="form-control" value="{{collection.perpage}}">
<option value='2'>2</option>
<option value='5'>5</option>
<option value='10'>10</option>
<option value='15'>15</option>
<option value='20'>20</option>
<option value='25'>25</option>
</select>
</div>
</div>
Thanks in advance.
Ractive has named yields where you can define placeholders in your layout and let the consuming component define what goes in there. Think of it like a layouting mechanism.
A simple example is a modal, where you have a header, body and footer which may be different for each instance. A modal component could be defined only as the layout of the modal (think empty bootstrap modal) and a bunch of yields resembling insertable positions.
const Modal = Ractive.extend({
template: `
<div class="modal">
<div class="modal__header">{{yield header }}</div>
<div class="modal__body">{{yield body }}</div>
<div class="modal__footer">{{yield footer }}</div>
</div>
`
})
On the consuming component, you use the layout component and define what goes in those positions. Note that the yield contents can be anything, even other components.
const Page = Ractive.extend({
components: { Modal },
template: `
<div class="page">
<div class="page__stuff">
...
</div>
<Modal>
{{#partial header }}
This is the header
{{/partial}}
{{#partial body }}
This is the body
{{/partial}}
{{#partial footer }}
This is the footer
{{/partial}}
</Modal>
</div>
`
});
In your case, you can break up your table into components (i.e. filters, status bar, left column checkboxes, table header) and define a layout component. Then, whenever you need it, you use the layout component, stick into it whatever you want wherever you want.
A more advanced feature is Anchors. Together with ractive.attachChild() and ractive.link(), you can attach components to anchors manually, on-the-fly. It's essentially how Ractive mounts components and binds data when it sees a component on the template. Except this time, the functionality is exposed on the API.
Im having a really hard time with a project. Im pretty new to Meteor and JavaScript for that matter. Any help would be great. I have created a messenger app. When the users sign in, they can select who to chat with. However, when they start chatting. It only recognizes the user who is signed in and not the other chatter. Here is a screenshot of what I mean. I am signed in as a user from firefox and another from chrome.Here is the image, showing the chat.
Here is my HTML
<template name="chat_page">
<h2>Type in the box below to send a message!</h2>
<div class="row">
<div class="col-md-12">
<div class="well well-lg">
{{#each messages}}
{{> chat_message}}
{{/each}}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form class="js-send-chat">
<input class="input" type="text" name="chat" placeholder="type a message here...">
<button class="btn btn-default">send</button>
</form>
</div>
</div>
</template>
<template name="chat_message">
<div class = "container">
<div class = "row">
<div class = "col-md-6">
{{> profile}} said: {{text}}
</div>
</div>
</div>
</template>
<template name="profile">
<small>
<img src = "/{{avatar}}" class="img-rounded" width="65" height="50">
{{username}}
</small>
</template>
Here is my JavaScript.
Template.chat_page.helpers({
messages:function(){
var chat = Chats.findOne({_id:Session.get("chatId")});
return chat.messages;
},
other_user:function(){
return ""
},
})
Template.profile.helpers({
username: function() {
return Meteor.user().profile.username;
},
avatar: function() {
return Meteor.user().profile.avatar;
},
})
I have the following JSON received at my web application.
I have a knockout viewmodel:
var self = this;
self.ActiveAlarms = ko.observable();
and my JSON call:
$.getJSON("/api/Dashboard/ActiveAlarmsPerAlarmTypeForTurbine/591", function (data) {
objVM.ActiveAlarms(data);
});
And I have my .cshtml page:
<div class="row">
<div class="col-md-12">
<span data-bind="text: objVM.ActiveAlarms.turbine.name"></span>
</div>
</div>
<div class="row" data-bind="foreach: listOfAlarmsPerAlarmType">
<div class="col-md-12">
<span data-bind="text: alarmType.name"></span>
</div>
</div>
But nothing shows up... :-( - what am I missing here?
The rest of the webpage, viewmodel and the knouckout/json works very fine.
Could be a number of things, are you binding the page correctly?
But one thing i noticed what this
<div class="row">
<div class="col-md-12">
<span data-bind="text: objVM.ActiveAlarms().turbine.name"></span>
</div>
</div>
<div class="row" data-bind="foreach: listOfAlarmsPerAlarmType">
<div class="col-md-12">
<span data-bind="text: alarmType.name"></span>
</div>
</div>
You need to add parentheses to the observable object in the markup
For a bootstrap carousel item <div class="item"> the first item needs to be active
div class="item active"> though only the first the item
Thought to write a Handlebars Helper, to loop through like this:
<div class="item active">
<div class="foo">{{foo.[0]}}</div>
</div>
{{#each resArray foo}}
<div class="item">
<div class="foo">{{this}}</div>
</div>
{{/each}}
..though how would this be written correctly?
Handlebars.registerHelper("resArray", function(array) {
return array[1 to array.length];
});
Also, where would this helper go? ..in my node server.js file where Handlebars is assigned?
Turns out it's as easy as:
{{#each foo}}
{{#if #first}}
<div class="item active">
<div class="foo">{{this}}</div>
</div>
{{else}}
<div class="item">
<div class="foo">{{this}}</div>
</div>
{{/if}}
{{/each}}
Use the following code:
{{#each foo}}
<div class="item {{#if #first}}active{{/if}}">
<div class="foo">{{this}}</div>
</div>
{{/each}}