I have a MVC project. I am new to jsrender and try to render it.
I have a js file which contains all the jquery function. so i have put my template in there as well. The code for that looks like:-
function doSomething(){
var movies = [
{ name: "The Red Violin", releaseYear: "1998" },
{ name: "Eyes Wide Shut", releaseYear: "1999" },
{ name: "The Inheritance", releaseYear: "1976" }
];
$.when($.get('../Views/Hr/Templates/_mytemplates.tmpl.html'))
.done(function (tmplData) {
alert(tmplData);
$.templates({ tmpl: tmplData });
$('#divload').html(
$.render.tmpl(movies)
);
});
}
The js file is located in the Scripts/myScripts folder.
I am not able to render this template.
Can anybody explain why i am having the issue?
Thanks in advance
Related
I am using Vuetify to load an image:
<v-img :src="this.imageUrl" :lazy-src="defaultImage" v-on:error="onError" :width="100" :height="150"></v-img>
data () {
return {
defaultImage: require('#/assets/images/defaultImage.png'),
useFallbackImage: false
}
},
computed: {
imageUrl: function() {
return !this.useFallbackImage ? `http://foo/v1.0/bar/${this.propId}` : this.defaultImage;
}
},
methods: {
onError: function() {
this.useFallbackImage = true;
}
}
I don't know if the image exists, so I am letting the browser try, and if it doesn't then fallback to the default. This works just fine, but Vuetify annoyingly prints a bunch of junk to the console:
"[Vuetify] Image load failed ... found in ..."
I looked in the source code and it looks like they are indiscriminately printing to the console whenever an error even before the handler. But I thought I would try -- does anybody know of a way to squelch Vuetify here?
Thanks
You maybe able to do something like this:
import VImg from 'vuetify/lib/components/VImg'
export default VImg.extend({
name: 'VImageWrapper',
methods: {
onError() {
// leave empty
}
}
})
Taken from this thread:
https://github.com/vuetifyjs/vuetify/issues/6755
Problem: Although from the Vue DevTools I am passing the prop correctly and the router-view component has access to the data that it needs and in the correct format, whenever I try to access any of the data properties from within the template I get Uncaught TypeError: Cannot read property 'name' of null. It's really confusing because from the DevTools everything is a valid object and the properties are not null.
App.js
const game = new Vue({
el: '#game',
data: function() {
return {
meta: null,
empire: null,
planets: null
};
},
created: () => {
axios.get('/api/game').then(function (response) {
game.meta = response.data.meta;
game.empire = response.data.empire;
game.planets = response.data.planets;
});
},
router // router is in separate file but nothing special
});
main.blade.php
<router-view :meta="meta" :empire="empire" :planets="planets"></router-view>
script section of my Component.vue file
export default {
data: function() {
return {
}
},
props: {
meta: {
type: Object
},
empire: {
type: Object
},
planets: {
type: Array
}
}
}
Any ideas? Thanks in advance.
Because of your data is async loading so when my Component.vue renders your data in parent component may not be there. So you need to check if your data is loaded. You can try this code:
{{ meta != null && meta.name }}
PS: Your created hook should be:
created() {
axios.get('/api/game').then((response) => {
this.game.meta = response.data.meta;
this.game.empire = response.data.empire;
this.game.planets = response.data.planets;
});
},
router-view is a component from view-router which can help render named views. You can not pass empire and planets to it as those are props of your component.
You have to have following kind of code to pass empire and planets to your component:
<my-component :meta="meta" :empire="empire" :planets="planets"></my-component>
You can see more details around this here.
I'm spent days trying to work out how to use the kendo-ui component with Durandal but to no avail.
I've managed to add a kendo-ui component declaratively on the page i.e. . This has no problems.
However, I would like to do some animations based on page events. Coding directly in the javascript viewmodel makes it easier to manipulate afterwards.
I've added my code below (which doesn't work), and I'm not sure that I'm taking the right approach. Actually, I'm sure I'm not. Anyone who can point me in the right direction I would appreciate it.
Any help or suggestions are welcome
Main.js
requirejs.config({
paths: {
'text': '../lib/require/text',
'durandal':'../lib/durandal/js',
'plugins': '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'jquery': '../lib/jquery/jquery-1.9.1',
'kendo': '../lib/kendo/kendo.ui.core.min',
'knockout': '../lib/knockout/knockout-3.1.0',
'bootstrap': '../lib/bootstrap/js/bootstrap',
'toastr': '../lib/toastr/toastr',
'lib': '../lib'
},
shim: {
'kendo': { deps: ['jquery'], exports: 'kendo' },
'bootstrap': {deps: ['jquery'],exports: 'jQuery'}
}
});
define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'durandal/binder', 'kendo'], function (system, app, viewLocator, binder, kendo) {
app.title = 'My Jumpstart';
//specify which plugins to install and their configuration
app.configurePlugins({
router:true,
dialog: true,
widget: {
kinds: ['expander']
}
});
kendo.ns = "kendo-";
binder.binding = function (obj, view) {
kendo.bind(view, obj.viewModel || obj);
};
app.start().then(function () {
viewLocator.useConvention();
app.setRoot('shell');
});
});
index.js
define(['durandal/app', 'durandal/system', 'knockout', 'toastr', 'kendo'],
function (app, system, ko, toastr, kendo) {
var myButton = function () {
var kbutton = $("#myButton").kendoButton();
};
var vm = {
myButton: myButton
};
return vm;
});
index.html
<section>
<div id="myButton">My Kendo Button</div>
</section>
Instead of shimming, add the Kendo libraries via the <script> tag on your index.html page. Be sure to add it after jQuery.
Also, are you using the knockout-kendo library from Ryan Niemeyer? That would affect my answer.
I am creating an MVC3 application, with requireJS. In my views I need to convert the Model object into a knockout viewmodel object. So I need to use knockout and knockout.mapping libraries.
My application is designed in the following way,
1). All the script files are categorized into folders
Scripts/app/home/ - contains the scripts for the views in Home controller.
Scripts/lib/ - contains the scripts like jQuery, knockout,knockout.mapping, requirejs etc
2). In the "_Layout.cshtml" I am referencing "require.js" like this.
<script src="#Url.Content("~/Scripts/lib/require.js")" type="text/javascript"></script>
3). To configure the require.js settings I am using a different script file called "common.js" (Scripts/lib/common.js)
require.config(
{
baseUrl: "/Scripts/",
paths:{
jquery: "lib/jquery-2.0.3",
ko: "lib/knockout-2.3.0",
komapping: "lib/knockout.mapping"
}
});
4). This is my index.js file which is in 'Scripts/app/home/"
define(['ko', 'komapping'], function (ko, komapping) {
var person = function () {
var self = this;
self.getPersonViewModel = function (data) {
return ko.mapping.fromJS(data); ;
};
};
return { Person: person };
});
5). This is my "Index" action method in the "Home" controller
public ActionResult Index()
{
var person = new Person
{
Id = 1,
Name = "John",
Addresses = new List<Address>(new[]{new Address{Country = "Country 1", City = "City 1"}})
};
return View(person);
}
6). Finally this is my "Index" view
#model MMS.Web.Models.Person
<script type="text/javascript">
require(["/Scripts/common/common.js"], function () {
require(["app/home/index"], function (indexJS) {
var person = new indexJS.Person();
var vm = person.getPersonViewModel(#Html.Raw(Json.Encode(Model)));
});
});
</script>
The problem which I am facing is when loading the index.js file, I get a script error that the knockout.js cannot be loaded.
Failed to load resource: the server responded with a status of 404 (Not Found) - http:///Scripts/knockout.js
But if I remove the dependency of "komapping" inside the "index.js" file it loads correctly, but then I cannot use the mapping functionality.
I had a look inside these links, but couldn't find a solution,
Knockout.js mapping plugin with require.js and
https://github.com/SteveSanderson/knockout.mapping/issues/57
Your help, suggestions are much appreciated. Thanks!
I had the same issue. The problem is that the knockout.mapping defines a knockout dependency, so you need to satisfy this one when you load the script.
Here is how you should load your mapping stuff
require.config(
{
baseUrl: "/Scripts/",
paths:{
jquery: "lib/jquery-2.0.3",
knockout: "lib/knockout-2.3.0",
komapping: "lib/knockout.mapping"
},
shim: {
komapping: {
deps: ['knockout'],
exports: 'komapping'
}
}
});
Then in my case, I use an index.js file with a requirejs call like the following
requirejs(['jquery', 'knockout', 'komapping'], function($, ko, komapping){
ko.mapping = komapping;
//Do other stuff here
});
Actually I'm creating my first ExtJS 4 MVC application. Following the application guide from documentation, I initialize my controller like that :
Ext.application({
name: 'RateManagement',
appFolder: 'softcom',
context: null,
constructor: function(context) {
this.context = context;
},
launch: function() {
Ext.create('Ext.Panel', {
layout: 'fit',
renderTo: 'rate-management',
items: [
{
xtype : 'ratelist'
},
{
xtype : 'rateedit'
}
]
});
},
controllers: [
'Rate'
],
});
But for future ajax call, my controller need to know the ajaxUrl which is coming from Liferay 6. In Liferay, I can get URL like that :
<portlet:resourceURL var="listRates" escapeXml="false" id="listRates"></portlet:resourceURL>
<script type="text/javascript">
var rateContext = {
contextPath: '<%=request.getContextPath()%>',
listRatesUrl : '${listRates}',
strings: strings
};
</script>
My idea is to pass the var rateContext to my controller "Rate".
Any Idea?
Thank you!!
Concept of passing variable from app to controller looks wrong to me. Instead I would create getter somewhere in your app config
Ext.application({
// ...
context: null,
getContext: function() {
return this.context;
},
constructor: function(context) {
this.context = context;
},
// ...
});
And then you can get it from controller using:
this.application.getContext()
But if you would like to use approach of passing variable to controller you always can use
yourApp.getController("Rate") (you can do it in your lounch method) in order to access the controller.