I have a couple of questions related to dojo. Firstly I have an example I copied from online and ran it and it works perfectly. By the way I am working on a web application in visual studio 2010. It runs fine but my question is that I use the urls (version 1.5) from the ajax.googleapis.com and it works but as soon as I use the src="/folder/dojo.js.uncompressed.js" with the local copy (version 1.7.1) in my folder in my web app, it doesn't work. Any ideas about this.
The second question is using the datagrid example but instead of hard coding the values for the datagrid; I want to pass the results of a sql query from a database to the datagrid. Does anyone have ideas on this?
Here is code showing an attempt to use a locally stored file:
<title>The Simplest Dojo DataGrid Example of All Time</title>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css"
href="/Styles/Grid.css" />
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/grid/
resources/claroGrid.css" />
</head>
<body class="claro">
<div style="width: 600px; height: 200px">
<table id="billsGrid" dojoType="dojox.grid.DataGrid">
<thead>
<tr>
<th field="number">Number</th>
<th field="name">Name</th>
<th field="position">Position</th>
<th field="victories" width="180px">Super Bowl Victories</th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript"
src="/Styles/dojo.js.uncompresses.js"
djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
</script>
<script type="text/javascript">
dojo.ready(function () {
var theGreatestTeamOfAllTime = {
items: [{
"number": "12",
"name": "Jim Kelly",
"position": "QB",
"victories": "0"
},
{
"number": "34",
"name": "Thurman Thomas",
"position": "RB",
"victories": "0"
},
{
"number": "89",
"name": "Steve Tasker",
"position": "WR",
"victories": "0"
},
{
"number": "78",
"name": "Bruce Smith",
"position": "DE",
"victories": "0"
}
],
identifier: "number"
};
var dataStore =
new dojo.data.ItemFileReadStore(
{ data: theGreatestTeamOfAllTime }
);
var grid = dijit.byId("billsGrid");
grid.setStore(dataStore);
});
</script>
</body>
</html>
This does not work with jscript errors cropping up.
could not load dojox/grid/DataGrid.js
To make it work locally, examine your djConfig and the script includes for dojo to ensure paths are correct, especially the baseUrl
djConfig = {
parseOnLoad: true,
baseUrl: "../dojoroot/dojo/"
}
ALso make sure you are including the correct stylesheets (all includes and stylesheets must point to the same dojo version)
Examine the Net tab in firebug to see any errors in urls
regarding your second question, dojo has a concept of datastores - these are client (javascript) side holders of data. Your server-side can return the query result in JSON (preferred), XML or any other format.
The client (javascript/html) can use AJAX to fetch this data and render it in a datagrid.
dojo has fancy stores such as queryreadstore that supports paging/lazyloading
A good place to start is the nightly tests for dojo:
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/
Here are the steps I follow:
1) download dojo toolkit from http://dojotoolkit.org/download/
2) install it with your application root. Typically, in my application root directory, I have a directory called dojoroot under which i untar dojo toolkit
3) in your html, head section make sure your css links are pointing to local dojoroot. FOr xample:
4) Make sure your djConfig is correctly set:
djConfig = {
parseOnLoad: true,
baseUrl: "../../../dojoroot/dojo/"
};
note that the baseUrl is important - it is the directory in which dojo.js is located
5) for the dojo.js src include, make sure the path is correct. for example:
If there are errors, your Net tab in firebug will show them - they are usually related to path issues
Related
I am trying to use the Kendo autocomplete component and I keep getting this grey bar that obscures part of the answer when it is selected.
Does anyone know who to fix this issue?
See my code below:
<link href="~/Scripts/Kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="~/Scripts/Kendo/styles/kendo.bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/Kendo/js/kendo.ui.core.min.js"></script>
<script src="~/Scripts/Kendo/js/kendo.combobox.min.js"></script>
<div class="k-content">
<input id="siteItem" placeholder="Select site..." style="width:100%" />
$.getJSON("/FormReport/GetSites/" + org + "/" + e.dataItem.Value,
function (data) {
$("#siteItem").kendoComboBox({
autoWidth: true,
dataTextField: "Text",
dataValueField: "Value",
dataSource: data,
filter: "contains",
suggest: true
});
});
The fix to remove the issue was style="min-width=100%". The textbox started off on page load with no data attached to it and therefore wasn't actually using the correct width. When data was added later, it doesn't recompensate to the correct width. Using min-width makes the textbox draw correctly before data gets attached dynamically and therefore removes the phantom grey box (which I believe is the X or clear button).
Follow up to related question
here
For whatever reason I'm unable to access my model in my xml view when it's set through sap.ui.getCore().setModel(). If I set it on the this.getView() I have no problems at all.
My view XML
<mvc:View controllerName="ca.toronto.rcsmls.webapp.controller.Login"
xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:l="sap.ui.layout">
<Page title="{i18n>loginPageTitle}">
<content>
<Panel id="loginPanel" busyIndicatorDelay="0"
headerText="{i18n>loginPanelTitle}" class="sapUiResponsiveMargin loginPanel"
width="auto">
<l:VerticalLayout width="100%">
<Input type="Text" placeholder="{i18n>loginUidHolder}" value="{/mlsUser/uid}" />
<Input type="Password" placeholder="{app>/Password}"
value="{/mlsUser/password}" />
<Button text="{i18n>loginButtonText}" press="doLogin"
class="sapUiSmallMarginEnd customBold" width="100%" />
</l:VerticalLayout>
</Panel>
</content>
</Page></mvc:View>
My controller JS contains this for setModel()
onInit : function() {
sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel("webapp/controller/app.json"), "app");
}
Again, if I set the model to this.getView().setModel() instead of getCore() XML and controller work fine together. I also added data-sap-ui-xx-bindingSyntax="complex" to my index.html but that didn't seem to make a difference. Any help would be appreciated.
Edited to include more information
My Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel",
], function (UIComponent, JSONModel) {
"use strict";
return UIComponent.extend("ca.toronto.rcsmls.webapp.Component", {
metadata : {
manifest: "json"
},
init : function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// set data model
var oData = {
mlsUser : {
uid : "",
password : "",
}
};
var oModel = new JSONModel(oData);
this.setModel(oModel);
// create the views based on the url/hash
this.getRouter().initialize();
}
});
});
My manifest.json
{
"_version": "1.1.0",
"sap.app":
{
"_version": "1.1.0",
"id": "ca.toronto.rcsmls",
"type": "application",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion":
{
"version": "1.0.0"
},
"ach": "CA-UI5-DOC"
},
"sap.ui":
{
"_version": "1.1.0",
"technology": "UI5",
"deviceTypes":
{
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes":
[
"sap_bluecrystal"
]
},
"sap.ui5":
{
"_version": "1.1.0",
"rootView": "ca.toronto.rcsmls.webapp.view.App",
"dependencies":
{
"minUI5Version": "1.30",
"libs":
{
"sap.m":
{
}
}
},
"config":
{
"authenticationService": "http://172.21.226.138:9080/RcsMlsSvc/jaxrs/user/authenticate/",
"assignedWorkService": "http://172.21.226.138:9080/RcsMlsSvc/jaxrs/mls/searchAssignedWork"
},
"models":
{
"i18n":
{
"type": "sap.ui.model.resource.ResourceModel",
"settings":
{
"bundleName": "ca.toronto.rcsmls.webapp.i18n.i18n"
}
}
},
"routing":
{
"config":
{
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "ca.toronto.rcsmls.webapp.view",
"controlId": "root",
"controlAggregation": "pages"
},
"routes":
[
{
"pattern": "",
"name": "login",
"target": "login"
},
{
"pattern": "work",
"name": "work",
"target": "work"
}
],
"targets": {
"login": {
"viewName": "Login"
},
"work": {
"viewName": "Work"
}
}
},
"resources":
{
"css":
[
{
"uri": "css/style.css"
}
]
}
}
}
Model app.json
{
"BaseURL": "https://smp-pNNNNNNtrial.hanatrial.ondemand.com",
"ES1Root": "https://sapes1.sapdevcenter.com",
"AppName": "qmacro.myfirst",
"Username": "yourusername",
"Password": "yourpassword"
}
I found an example where core binding works here. It is a much simpler application. I'm still trying to figure out the what the differences are between this project and mine
I was made aware of this question by a similar question on Github
By default, UI5 components don't inherit models and binding contexts from their environment (the ComponentContainer where they are placed). This was done for the sake of isolation.
You can change that default behavior by setting the property propagateModel:true for the container:
new sap.ui.core.ComponentContainer({
name: "ca.toronto.rcsmls.webapp.Component",
propagateModel: true
}).placeAt("content");
Documentation for propagateModel can be found in the API reference as well as in the UI5 developer guide (the corresponding paragraph in the latter page was only added recently, it was not available when you raised your question).
But when the model is created in the scope of the component and shall be used inside the component, then there should be no need to add it to the Core. Just assign it to the component to share it between views inside that component:
Assign it either from some method in a view controller
onInit : function() {
this.getOwnerComponent().setModel(
new sap.ui.model.json.JSONModel(
"webapp/controller/app.json"), "app");
}
or during init of the Component.js itself
init : function() {
// create and set model to make it available to all views
this.setModel(
new sap.ui.model.json.JSONModel(
"webapp/controller/app.json"), "app");
// never forget to call init of the base class
UIComponent.init.apply(this, arguments);
}
The most modern approach is to configure the model in the manifest.json and to let the framework instantiate an assign it. See Walkthrough Tutorial - Step 10: Descriptor for Applications for an example.
Using any of these approaches, there should not even be a need to read and set the model in another view, as long as that view is a descendant of the component (part of the control tree returned by createContent).
I experienced the same behavior.
If I create a simple one-file application, without any complex UI elements, the core-based binding works like a charm.
If I create a complex container, like an App with a shell, this kind of binding will not work anymore. It seems that these containers hide the global model from the view.
As a workaround I used the following code snippet:
this.getView().setModel(sap.ui.getCore().getModel(modelName), "modelName");
Or even you can bind the model directly to the control where you want to use.
None of them are the best solution if you have to use the global model in several view/control, but that's working for me.
I the view above only the placeholder of the password field is using your app model. If this placeholder is not filled correctly then I guess the json file could not be loaded or the content is not matching the binding path you use in your view for the placeholder property of the password field. To find out more please post also the content of your json file. It should look somehow like this:
{ "Password" : "Enter your password", ... }
So according to the binding in the view there must be "Password" property at the root level of the data object.
Below you find a running example that should help you. As you can see you it work like a charm, so you can easily put a named model onto the Core and reference it in your view.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5 single file template | nabisoft</title>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"></script>
<!-- use "sync" or change the code below if you have issues -->
<!-- XMLView -->
<script id="myXmlView" type="ui5/xmlview">
<mvc:View
controllerName="MyController"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc">
<App>
<Page title="My Page Title">
<content>
<Panel id="loginPanel" busyIndicatorDelay="0"
headerText="My Login Panel Title" class="sapUiResponsiveMargin loginPanel"
width="auto">
<l:VerticalLayout width="100%">
<Input type="Text" placeholder="{Enter User ID}" value="{/mlsUser/uid}" />
<Input type="Password" placeholder="{app>/Password}" value="{/mlsUser/password}" />
<Button text="{Login}" press="doLogin" class="sapUiSmallMarginEnd customBold" width="100%" />
</l:VerticalLayout>
</Panel>
</content>
</Page>
</App>
</mvc:View>
</script>
<script>
sap.ui.getCore().attachInit(function () {
"use strict";
//### Controller ###
sap.ui.controller("MyController", {
onInit : function () {
var oData, oModel;
// 1. app model is only used for the placeholder field in the view
oData = {
Password : "Enter your password"
};
oModel = new sap.ui.model.json.JSONModel(oData);
sap.ui.getCore().setModel(oModel, "app");
// 2. default model is used in the view as well
oData = {
mlsUser : {},
Login : "Login now"
};
oModel = new sap.ui.model.json.JSONModel(oData);
sap.ui.getCore().setModel(oModel);
// 3. we need this because of the relative binding
// of the text property of the login button
this.getView().bindElement("/");
}
});
//### THE APP: place the XMLView somewhere into DOM ###
sap.ui.xmlview({
viewContent : jQuery("#myXmlView").html()
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
In this thread some people have mentioned that "sap.ui.getCore() works with small stuff, but for whatever reason not in more complex applications".
#Marc has also posted the right link to the API docs, where you can find the following:
A ManagedObject inherits models from the Core only when it is a
descendant of an UIArea
Of course, you have to know what this means in order write code that does what you expect. Here is a little example that tells you what could happen in case you have a small "misunderstanding" (see below).
The code below creates two instances of sap.m.Text and binds their text properties to a JSONModel, which is available as a named model "core" directly on the Core (retrieved with sap.ui.getCore()). There are 2 buttons, one for each sap.m.Text instance. In the corresponding press handlers of the buttons I just display the text property of the corresponding sap.m.Text instance. As you can see, both sap.m.Text instances are bound to the same property in the JSONModel. However, only the second sap.m.Text is added to the DOM.
Now the interesting part, which might be related to the confusion of this thread:
Only the text property of the second sap.m.Text control contains the expected text "Hello World" from the JSONModel. The text property of the first sap.m.Text control does not have the value "Hello World" from the model! This is expected behavior of SAPUI5 and it is documented! So I guess in case you face similar issues in your own "complex" app, then it might be quite probable that you have a hard to find bug related to this "expected" behavior.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5 single file template | nabisoft</title>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"></script>
<!-- use "sync" or change the code below if you have issues -->
<script>
sap.ui.getCore().attachInit(function () {
sap.ui.define([
"sap/m/Text",
"sap/m/Button",
"sap/ui/model/json/JSONModel"
], function (Text, Button, JSONModel) {
"use strict";
var oModel = new JSONModel({
hello : "Hello World"
});
sap.ui.getCore().setModel(oModel, "core");
// not in DOM
var oText1 = new Text({
text : "{core>/hello}"
});
//oText1.placeAt("text1"); // uncomment this to enable the binding
// add to DOM
var oText2 = new Text({
text : "{core>/hello}"
});
oText2.placeAt("text2");
// action buttons to display text property of text controls
new Button({
text : "show oText1",
press : function(){
alert("oText1.getText() = " + oText1.getText());
}
}).placeAt("btn1");
new Button({
text : "show oText2",
press : function(){
alert("oText2.getText() = " + oText2.getText());
}
}).placeAt("btn2");
});
});
</script>
</head>
<body class="sapUiBody">
<div id="text1"></div>
<div id="text2"></div>
<span id="btn1"></span>
<span id="btn2"></span>
</body>
</html>
sap.ui.getCore() and this.getView() return not the same object i think it's obvious why this doesn't work.
You are trying to get a object(model) from another object (the core) although the desired model is bound to another object(the view)
it's like i have two colored boxes (one red, one blue) and im trying to get the color red from the blue colored box
Here is an similar issue but the cause in this one depends on the id handling of the views in the UI5 framework:
https://scn.sap.com/thread/3551589
You can see the core and the view does not return the same object.
Also checkout the data binding section on the openui5 website: https://openui5beta.hana.ondemand.com/#docs/guide/e5310932a71f42daa41f3a6143efca9c.html
Create Model in components.js:
var oModel= new sap.ui.model.json.JSONModel;
oModel.loadData("webapp/controller/app.json");
this.setModel(oModel, "app");
Get Model:
This will create a reference to the model which has been created in the Components.js
var oModel= this.getView().getModel("app");
Refer to the model with "{modelName(app)>desiredProperty}"
<Input type="Password" placeholder="{app>Password}"
value="{app>mlsUser/password}" />
could you post your json content?
Hope this was helpful
I'm making an AJAX call from jquery Datatables to populate a table. The AJAX call is being made and it returns valid JSON (validated with JSONlint). What happnes is that Datatables creates an empty table before the AJAX call completes and returns data.
I've put the JSON returned by the web service into a file and used that as the sAjaxSource and Datatables populates the table properly, so this is a problem with Datatables not waiting for the AJAX call to complete.
Datatables seems to know that there is some problem with their AJAX calls because the documentation they include showing how to populate a table from an AJAX calls just loads data from a file.
Has anyone gotten Datatables to work with a real AJAX call (not loading JSON from a file)? I'd appreciate any pointers to a Datatables example that works with a real AJAX call.
I can also switch to a different table library. I decided to use Datatables over Jtable but I may have to switch if Datatables doesn't support AJAX.
Here's my code. Feedback on it is appreciated.
<html>
<head>
<link rel="stylesheet" type="text/css"
href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
</head>
<body>
<table id="example">
<thead>
<tr>
<th>Serial Number</th>
<th>Sales Order</th>
<th>Part Number</th>
<th>Part Description</th>
<th>Shipped Date</th>
<th>Date Sold</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript" charset="utf8"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8"
src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script>
$(function() {
$("#example").dataTable({
"bServerSide": true,
"sAjaxSource": "/mtprest/Product/productByStatus?status=awaiting",
"aoColumns": [{
"mData":"serialNumber"
},{
"mData": "sONumber"
},{
"mData": "partNumber"
},{
"mData": "desc"
},{
"mData":"shippedDate"
},{
"mData":"soldDate"
},{
"mData":"status"
}
]
});
});
</script>
</body>
</html>
Here's the JSON returned by the web service:
{"iTotalRecords":12,"iTotalDisplayRecords":0,"sEcho":"","aaData":[{"productId":47209009,"serialNumber":"0909090","sONumber":"dev35001484_","partNumber":"987654KP-GL","desc":"TEST MEC","shippedDate":null,"soldDate":null,"status":"Awaiting Validation"}, ...}
I had lots of problems when I tried using an AjaxSource. I ended up making the web service calls myself, and then passing the returned JSON data into the DataTable when I initialize it.
Your JSON says "iTotalDisplayRecords":0
I think it is correct that datatables does not show any row.
Have a look at
http://datatables.net/usage/server-side
//Try This
$("#example").dataTable({
"bServerSide": true,
"sAjaxSource": "/mtprest/Product/productByStatus?status=awaiting",
"columns": [{
"mData":"serialNumber"
},{
"data": "sONumber"
},{
"data": "partNumber"
}
],
"columnDef" :
{ "targets" : 0, //first row
"render" : function (data) {
return data
}
},
{ "targets" : 1, //second row
"render" : function (data) {
return data
}
},
{ "targets" : 2, //third row
"render" : function (data) {
return data
}
}
});
//Do it for the number of rows you need.
I wrote a simple hello world application for Firefox mobile. While adding a .webapp file, I got Validation Result: OK, But My App is not installed in simulator. My file contents are following.
Hello.webapp
{
"name": "My App",
"description": "My elevator goes here",
"launch_path": "/Hello.html",
"icons": {
"128": "FF101.png"
},
"developer": {
"name": "Your name or organization",
"url": "http://your-homepage-here.org"
},
"default_locale": "en"
}
Hello.html
<html>
<head>
<title>
Hello Firefox101
</title>
<script>
function sayHello()
{
alert("Hi Hello");
}
</script>
</head>
<body>
This is my First App For FireFox OS.<br>
<input type="button" class="button" value="Click Me For Alert" onClick="sayHello()"/>
</body>
</html>
Image file is in same folder.
Please guide me what I have missed. Thanks in advance.
The name of your webapp file must be manifest.webapp.
Link : https://marketplace.firefox.com/developers/docs/quick_start (Part : App Manifests)
Your manifest file name always be manifest.webapp.
Though you are new please read developer guideline carefully. It is very helpful. Cause after developing app when you are going to published it on marketplace, you will get lots of error. Like in your simple app you use onclick funtion, inline script etc. but Firefox OS app don't support it.(link: https://developer.mozilla.org/en-US/Apps/Build/installable_apps_for_Firefox_OS/CSP)
So, better to read guideline.
I have a rather large ASP.NET MVC web application which uses KnockoutJS extensively throughout. Over the years I've created many templates for the application, however they all reside in various web pages using named script tags. It's almost become unbearable to manage them on the various views. I'd like to figure out a way to consolidate these templates into their own html files so that they are more manageable.
I'd like to know if there are any libraries out there that supports this concept? I don't want to reinvent the wheel, as I'm sure someone has already ran into this problem in the past and solved it. Here is a quick overview of what I'm dealing with...
Basically, I have a lot of content that resembles the following markup. Notice that I have my templates defined in the same page as my actual content markup:
[[ HOME/INDEX.CSHTML ]]
<h1>Customers</h1>
<div data-bind="template: {name: 'personTmpl', foreach: customers}"></div>
<h1>Products</h1>
<div data-bind="template: {name: 'productTmpl', foreach: products}"></div>
<script type="text/html" id="personTmpl">
Name: <span data-bind="text: name" />
Address: <span data-bind="text: address" />
</script>
<script type="text/html" id="productTmpl">
Description: <span data-bind="text: description" />
Category: <span data-bind="text: category" />
</script>
<script type="text/javascript">
$(function(){
var json = {
customers: [ { name: 'Joe', address: 'Denver, CO' } ],
products: [ { name: 'Skis', category: 'Outdoors' } ]
};
var vm = new CustomViewModel(json);
ko.applyBindings(vm);
});
</script>
[[ END HOME/INDEX.CSHTML ]]
What I'd like to do is store the personTmpl and productTmpl in their own html file and pull them into the view as needed. This would allow me to only have the content markup in my cshtml file. Plus it would enable me to use the templates from anywhere (ie. Customers\Index, Products\Show, Home\Index, etc..).
I would expect that it would require some custom js on each page, but I think this is a small price to pay for cleaning up the clutter and making my templates available to all views. I could see me using some server side tags on each page or something like this (merely an example):
#section templates {
#Content.Template("Person.tmpl", Url)
#Content.Template("Product.tmpl", Url)
}
<h1>Customers</h1>
<div data-bind="template: {name: 'personTmpl', foreach: customers}"></div>
<h1>Products</h1>
<div data-bind="template: {name: 'productTmpl', foreach: products}"></div>
<script type="text/javascript">
$(function(){
var json = #Html.Raw(Json.Encode(ViewBag.PageData)));
var vm = new CustomViewModel(json);
ko.applyBindings(vm);
});
</script>
With storing them into their own templates, I could even query the content dynamically for tooltips and dialogs using old fashion $.get('/tmpl/Person.tmpl', renderFunc).
Again, I don't mind creating my own implementation, but I'm convinced there is a solution out there already. Anybody?
Thanks in advance!!
My recommendation would be to look at the external template engine here: https://github.com/ifandelse/Knockout.js-External-Template-Engine
It allows you to place your templates in external files, reference them in your binding just as you normally would using the name parameter, and uses some conventions or configuration to determine the exact path to find the template file.
The external template engine is a pretty robust solution. I have also recently been using require.js with its text plugin for this purpose as well. More info in this answer: knockout.js loading templates at runtime
If you want to render them in-line, then I suppose a helper function could load the file and wrap it in a script tag with a non-JS type.