Angular Meteor: MongoDB collections are not shown in the UI - angular-meteor
I'm trying to use angular-meteor with Meteor and following the tutorial from https://www.meteor.com/tutorials/angular/collections
I have the below code files:
index.html
<body ng-app="web-alerts">
<div ng-include="'client/index.ng.html'"></div>
</body>
client/index.ng.html
<div ng-controller="AlertsListCtrl">
<h1>Tasks:</h1>
<ul>
<li ng-repeat="webAlert in tasks">
<b>{{webAlert.title}}</b>
<p>Url: {{webAlert.url}}</p>
<p>Emails: {{webAlert.emails}}</p>
<p>Keywords: {{webAlert.keywords}}</p>
<p>Frequency: {{webAlert.frequency}}</p>
</li>
</ul>
</div>
client/app.js
Tasks = new Mongo.Collection("tasks");
if (Meteor.isClient) {
angular.module('web-alerts', ['angular-meteor']);
angular.module('web-alerts').controller('AlertsListCtrl', ['$scope', '$meteor',
function($scope, $meteor) {
$scope.tasks = $meteor.collection(Tasks);
}
]);
}
In MongoDB, I have added some items to the collection.
meteor:PRIMARY> db.tasks.find()
{ "_id" : ObjectId("55fe7cbc330d5b4cfb52ed9e"), "title" : "aaa
yyy zzzz", "description" : "desc goes here",
"url" : "http://abcd.com", "keywords" : "abcd, efgh,
ijkl", "emails" : "",
"frequency" : 10 }
But I don't see the collection data in the UI. If I assign a static array to $scope.tasks in controller, it works fine.
What could be the issue?
Thanks in advance.
Solved it by moving client/app.js to the root folder.
Can someone explain what could be the problem?
Related
How can I display pagination laravel on the vue component?
My controller like this :
public function index()
{
$products = $this->product->list();
dd($products);
return view('admin.product.index',compact('products'));
}
The result of dd($products); like this : https://postimg.org/image/w39usbfrv/
My view blade laravel like this :
<section class="content">
<product-list :product-data="{{json_encode($products)}}" :page="{{json_encode($products->links())}}"></product-list>
</section>
My vue component product list like this :
<template>
<div class="box">
...
<table class="table table-list">
...
<tr v-for="item in products" :key="item.id">
<td>{{item.name}}</td>
<td>{{item.createdAt}}</td>
<td>{{item.updatedAt}}</td>
</tr>
...
</table>
<div class="box-footer">
...
{{this.page}}
...
</div>
...
</div>
</template>
<script>
export default {
props: ['productData','page'],
data(){
return {
...
products: this.productData.data,
}
},
...
}
</script>
If I run the code, the result of {{this.page}} is empty
If this : {{$products->links()}} placed in view laravel it works
But if it passed on the vue component, the result is empty
How can I solve this problem?
Note :
I know how to use ajax request. But I don't use it. Here I just want to try the another way
you cannot encode it that way to JSON, read here what could help : https://laravel.com/docs/5.6/pagination#converting-results-to-json
DustJS xpath next sibling axis equivalent
How do I use parameters in DustJS? I made a jsfiddle where I want to print key value pairs where the key = [parameter].
In the fiddle I just want to display Larry, Moe and Curly's weight (not their height).
In XSLT this is easy. Just use Xpath to find prop[#name="weight"] then the following-sibling axis.
Fiddle: http://jsfiddle.net/6YrCg/
<script id="entry-template">
{title}
<ul>
{#names}
<li>{name}</li>{~n}
<ul><li>Weight:{#props.name}{value}{/props.name}</li></ul>
{/names}
</ul>
</script>
<div id="output"></div>
$(document).ready(function () {
var data = {
"title": "Famous People",
"names" : [{ "name": "Larry", "props":[{"name":"height","value":"5.8"},{"name":"weight","value":"160"}] },{ "name": "Curly", "props":[{"name":"height","value":"5.9"},{"name":"weight","value":"200"}]},{ "name": "Moe", "props":[{"name":"height","value":"5.8"},{"name":"weight","value":"160"}]}]
}
var source = $("#entry-template").html();
var compiled = dust.compile(source, "intro");
dust.loadSource(compiled);
dust.render("intro", data, function(err, out) {
$("#output").html(out);
});
});
Here is one solution, using the {#eq} helper to only output the value if the name key is equal to "weight".
{title}
<ul>
{#names}
<li>
{name}
<ul><li>Weight: {#props}{#eq key=name value="weight"}{value}{/eq}{/props}</li></ul>
</li>
{/names}
</ul>
Context helpers such as {#eq} are functions that augment the core syntax of Dust. For more information about this helper and other officially-supported helpers, check out the dustjs-helpers wiki page.
SAP UI5 XML View Tiles Icon not working
I have a XML View:
<mvc:View height="100%" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="my.own.controller">
<App>
<Page showHeader="false" enableScrolling="false">
<TileContainer id="container" tileDelete="handleTileDelete" tiles="{/TileCollection}">
<StandardTile icon="sap-icon://{icon}" number="{number}" title="{title}" info="{info}" infoState="Success" />
</TileContainer>
<footer>
</footer>
</Page>
</App>
And I have a js:
function initialLoad(){
// create some dummy JSON data
var data = {
"TileCollection" : [{
"icon":"history",
"number":"3",
"title" : "Project History",
"info": "click to view",
"infoState" : "Success"
}]
};
// instantiate the View
sap.ui.localResources("XMLViews");
var app = new sap.m.App({initialPage:"welcome"});
var myView = sap.ui.xmlview({id:"welcome", viewName:"XMLViews/welcome"});
app.addPage(myView);
// create a Model and assign it to the View
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
myView.setModel(oModel);
// put the View onto the screen
myView.placeAt("content");}
The problem is the icon is not showing up. If I hard code in my XML view:
icon="sap-icon://history"
Then the icon is showing up correctly.
I am stuck with this problem for one day and I appreciate if you could give me some hint!
Thanks!
The Way of binding data to the icon property is incorrect. it should be in this way.
icon="{icon}"
Instead make the change in your json as below:
var data = {
"TileCollection" : [{
"icon":"sap-icon://history",
"number":"3",
"title" : "Project History",
"info": "click to view",
"infoState" : "Success"
}]
};
I think this will work.
KendoUI Grid - How to declaratively set MVVM data column template to external template?
I am struggling with declarative setting grid column to a external template
Here's my template
<script type="text/x-kendo-template" id="someTemplate">
<div>
<label> ${firstName}</label>
<label>${lastName}</label>
</div>
</script>
and here's the grid declaration
<div data-role="grid" data-bind="source: people" data-columns='[
{"field": "firstName",
"title": "Full Name",
"template": "kendo.template($("#someTemplate"))"
}
]'></div>
And here's JS Fiddle reproducing my problem:
JSFiddle repro
You have 2 mistakes in your code :
you have to make your template from the html of the script element
you have to call directly kendo.template(...) as it is a function and not between quotes.
This gives such code :
"template": kendo.template($("#someTemplate").html())
See this jsfiddle : http://jsfiddle.net/bSGdW/9/
After hours of expirements I've found out that ....
template: kendo.template($("\\#check-results-template").html())
so just watch out the '#' wherever use kendo things !!
Making blog By codeigniter
I am currently working on a codeigniter project, now i want a option "Blog" where user can post and comment. A post can contain images , tables, different fonts, similar case is for comments . I am novice in webdevelopment, only know php and it's one framework. Would you please anyone suggest me,what should i do ?
NEW:
After this post i got some good advice and i took decision to use rich text editor tiny_mce but my bad luck that again i am having problem . I can't include the tiny_mce or after including it's not working . I worked how they instructed but no change normal textarea is coming . What should i do?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="<?php echo base_url("js/jquery-1.7.2.min.js"); ?>" type="text/javascript" ></script>
<script src="<?php echo base_url("js/scripts/tiny_mce/tiny_mce.js"); ?>" type="text/javascript" ></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
// content_css : "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Style formats
style_formats : [
{title : 'Bold text', inline : 'b'},
{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
{title : 'Example 1', inline : 'span', classes : 'example1'},
{title : 'Example 2', inline : 'span', classes : 'example2'},
{title : 'Table styles'},
{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
],
formats : {
alignleft : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'left'},
aligncenter : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'center'},
alignright : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'right'},
alignfull : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'full'},
bold : {inline : 'span', 'classes' : 'bold'},
italic : {inline : 'span', 'classes' : 'italic'},
underline : {inline : 'span', 'classes' : 'underline', exact : true},
strikethrough : {inline : 'del'}
},
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
</head>
<body>
<form method="post" action="somepage">
<div>
<div>
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%"></textarea>
</div>
<br />
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</div>
</form>
</body>
</html>
Here is a basic blog tutorial and also check this one but you can use WordPress for blog with codeigniter and here is an answer on so about integrating WordPress with codeigniter. About WordPress. Hope it helps.