Using Durandal widgets, you have to create a folder for each widget, and then 2 files in each folder. For example a mywidget folder containing view.html, model.js files.
This naming style makes it difficult to find files in the solution. Is there any way to name these file names like mywidget.html, mywidget.js?
If you want to use your own convention, you can override the way that the Widget plugin loads its parts relatively easily. For example, if you wanted your convention to be that both the view and view model of the widget were named after the widget's kind, you could do this:
define(["plugins/widget"], function (widget) {
// Look in 'widgets/[kind]' for '[kind].html' and '[kind].js'
var convertKindToKind = function (kind) {
return "widgets/" + kind + "/" + kind;
};
widget.convertKindToModulePath = convertKindToKind;
widget.convertKindToViewPath = convertKindToKind;
});
Alternatively, you can use the mapKind function for a "one-off" non-conventional widget mapping:
// Parameters are: Widget kind, viewId, moduleId
widget.mapKind("mywidget",
"widgets/mywidget/mywidget",
"widgets/mywidget/mywidget");
Related
I'm building a Vue app where a user reactively generates an HTML page from certain selections. Therefore, there is a very long expression that produces said HTML page. This expression/template is stored in a separate .html file. I would like to have that expression as a computed property in my app, but not sure what's the best way. I want to be able to use either the {{ }} template syntax, or at least the syntax you get inside directives, rather than have to plaster this. in front of every property and method I use, which is what I'd have to do if I move the template to JS-land (e.g. a separate module or just directly define it in the computed property).
Right now I got it working, but it's extremely hacky:
let appSpec = {
/* [snip] */
computed: {
/* other computed properties and… */
html () {
return getAppHTML(this);
}
},
};
let sheetTemplate = await (await fetch("sheet-template.html")).text();
let templateVars = [
...Object.keys(INITIAL_DATA),
...Object.keys(appSpec.computed),
...Object.keys(appSpec.methods)
];
let getAppHTML = new Function(`{${ templateVars.join(", ") }}`, "return `" + sheetTemplate + "`");
/* ... */
I’m thinking there must be a better way to do this.
I don't want to inject the expression directly into the places it's going to be used in my app (e.g. <iframe :srcdoc>), because I want to have a property that corresponds to it (for watchers etc).
Note that I'm using the in-browser API, no build step, and I'd rather keep it that way.
I have entity ListSettings which is used as Content-Item type for 2 layouts. Each layout is used 3 times on different pages.
The code I'm writing is not executed on the page - it's outside of 2sxc module.
So I wan't to find out on which page each object of entity ListSettings is. TabId is the best. Filtering by layout could be helpful as well since I need 3 tabIds that use 1 of the 2 layouts.
How do I do that programmatically? There's a lot of data inside of each entity including some relationships, children, parents and so on. Also I'm sure that all this data could be taken from the database manually, but it seems to be a hard way for me.
Bottom line: I have 6 entities. I want to get their tabIds and layouts programmatically. Layouts are optional but would be good.
Any suggestions?
This is quite challenging, because there are so many steps involved. But you can find something that does something similar here https://2sxc.org/dnn-tutorials/en/razor/2sa110/page
Here is an excerpt of the code:
// CONSTANTS
// this key is used in module settings
const string SettingsCG = "ToSIC_SexyContent_ContentGroupGuid";
// create array with all 2sxc modules in this portal
List<ModuleInfo> GetAllModulesOfPortal(int portalId) {
var mc = ModuleController.Instance;
var dnnMod2sxcContent = mc.GetModulesByDefinition(portalId, "2Sexy Content");
var dnnMod2sxcApp = mc.GetModulesByDefinition(portalId, "2Sexy Content App");
var mergedMods = new ModuleInfo[dnnMod2sxcContent.Count + dnnMod2sxcApp.Count];
dnnMod2sxcContent.CopyTo(mergedMods);
dnnMod2sxcApp.CopyTo(mergedMods, dnnMod2sxcContent.Count);
var allMods = mergedMods
.Where(m => m.DefaultLanguageModule == null)
.Where(m => !m.IsDeleted)
.Where(m => m.ModuleSettings.ContainsKey(SettingsCG));
return allMods.ToList();
}
I'm looking for a way to create single page model/ standalone single page.
It's like a custom single page for 'About Us', 'Home Page','Our Team',etc.
They are single page with backend options.
Anyone have any idea ?
So you need to create all needed type of files, like route JS file, template file, add info about that file into routes/index.js
example:
create file routes/views/aboutUs.js :
var keystone = require("keystone");
exports = module.exports = function(req, res) {
var view = new keystone.View(req, res);
var locals = res.locals;
// locals.section is used to set the currently selected
// item in the header navigation.
locals.section = "about-us";
locals.title = "About our company";
// Render the view
view.render("aboutUs");
};
create template file templates/aboutUs.pug :
block content
p Our company is super cool. We based it here long time ago
Put all your static content into template with correct syntax and css
Finally make addition to routes/index.js file:
app.get("/aboutUs", routes.views.aboutUs);
if you need to control user access to page also add such string
app.all("/aboutUs*", middleware.requireUser);
And dont forget to restart the app to see changes
That's clearly not what OP is asking for. They're asking if there is a way to create a single ADMIN UI editable page for Home, About Us, and so on. My answer is that I don't believe that is possible with KeystoneJS. Which is annoying, because I have clients that want that and Keystone would be perfect otherwise. Seems the only way to do it is create a list, auto create a record if one doesn't exist, and set "nocreat", and "novelette" on the list.
Is there a way to the current request url or path in Handlebars? I need to be able to switch what parts of the theme is loaded based on paths. I've tried {{url}} ... no luck. Using latest Stencil with Cornerstone.
I had to do something like this for a project with 3 different category page layouts. Without custom category templates in Stencil, you have to get a little creative.
First, inject the handlebars URL into your category.js file using the BigCommerce's inject handlebar helper seen here. Then parse it so you get only the unique parts, then perform some logic based on what you want to do.
I used the breadcrumb li length as an indicator of how deep I was in the category tree. There is likely a better way, but this is what I thought of first, and it worked just fine.
category.html
{{inject "currentPage" category.url}}
category.js
var pageURL = this.context.currentPage;
var pageURL = pageURL.replace(/\//g," ").replace("http:","").replace("storeurl.mybigcommerce.com","").replace("storeurl.com","").trim();
var catName = pageURL.substr(0,pageURL.indexOf(' '));
console.log('pageURL = ' + pageURL);
console.log('catName = ' + catName);
console.log($('ul.breadcrumbs li').length);
if( $('ul.breadcrumbs li').length == 3 ){
if(catName == "black-decker"){
if($(".cat-img").length){
$(".page").addClass("model-list");
$(".cat-img").hide();
$(".page").append("<div class='model-wrap'><div class='model-catalog' data-reveal-id='myModal'><span class='click-larger'>Click to view larger</span></div></div>");
$(".sidebarBlock-heading").text("Select Your Model Number Below:");
$(".brand-img").each(function(){
$(this).addClass(catName);
});
} else {
$(".page").addClass("model-list");
$(".sidebarBlock-heading").text("Select Your Model Number Below:");
$(".brand-img").each(function(){
$(this).addClass(catName);
});
// make page full width
$(".page-sidebar.cf.Left").addClass("full-width");
}
}
// MORE CODE etc...
In dojo 1.8 version, I have used this._startupWidgets to get widgets declared in template.But in dojo 1.9 version,I get this._startupwidgets as null.So I don't know that how to get it in dojo 1.9 version?
If you're actually looking for widgets contained within the reference widget, try:
var widget; // The widget you care about
require(["dijit/registry"], function(registry) {
registry.findWidgets(widget.domNode);
});
It should be noted that private variables/APIs begin with _. Thus, they're subject to disappear without notice. With that in mind, you could try looking at widget._attachPoints, which lists the names of all attach points in the template. This will also give you the names of plain DOM nodes, not just those of attach points that refer to widgets. A simple filter will extract those that are widgets for you:
var widget; // The widget you care about
require(["dojo/_base/array"], function(array) {
var templateWidgets = array.filter(widget._attachPoints, function(w) {
return !!widget[w].domNode;
});
});