This is my first project using web components and I'm a rookie at best with js/jquery, so I am not sure why this happening.
I have a custom element built in "search-form.html", all of my components and scripts are then brought in via a master "components.html" in the head of my index as such...
index.html:
<head>
<meta charset='utf-8'>
<script src="/static/template/js/webcomponents.min.js"></script>
<link rel="import" href="/static/template/components/components.html">
<link rel="icon" type="image/png" href="/static/template/img/favicon.png">
</head>
components.html:
<!-- POLYMER MUST BE LOADED -->
<link rel="import" href="/static/template/polymer/polymer.html">
<!-- TEMPLATE SCRIPTS -->
<link rel="import" href="/static/template/components/scripts.html">
<!-- Loads jquery and other scripts -->
<!-- TEMPLATE COMPONENTS -->
<link rel="import" href="/static/template/components/search-form.html">
then the search-form.html looks like this:
<!-- Defines element markup -->
<dom-module id="search-form">
<template>
<div class="input-prepend input-append">
<form id="search" method="get" action="/property/search">
<div class="btn-group">
<button id="search-type" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
Search by
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a data-name="city" data-label="city">City</a></li>
<li><a data-name="zip" data-label="zip">Zip Code</a></li>
<li><a data-name="mls" data-label="mls">MLS Number</a></li>
</ul>
</div>
<input id="input-tag" class="input-xlarge" type="text" placeholder="Select a search type..." data-provide="typeahead" value="" />
<button type="submit" class="btn"><i class="fa fa-search"></i></button>
</form>
</div>
</template>
<script>
/********************************
/ TYPEAHEAD ARRAY
/*******************************/
var obj = {
"city" : [],
"zip" : [],
};
$(document).ready(function() {
/*dynamic zipcode*/
for(i=43000; i<=45999;i++){
obj.zip.push({val: i.toString(), string: i.toString()});
}
for(i=48000; i<=49999;i++){
obj.zip.push({val: i.toString(), string: i.toString()});
}
});
/********************************
/ SEARCH TYPEAHEAD FUNCTION
/*******************************/
$(function searchTag($) {
var data = [];
$('.dropdown-menu > li > a').on("click", function() {
data = $(this).data('name');
});
var that = this;
$('#input-tag').typeahead({
source: function(query, process) {
var results = _.map(obj[data], function(value) {
return value.val;
});
process(results);
},
highlighter: function(val) {
var value = _.find(obj[data], function(p) {
return p.val == val;
});
return value.string;
},
updater: function(val) {
var value = _.find(obj[data], function(p) {
return p.val == val;
});
that.setSelected(value);
return value.string;
}
});
this.setSelected = function(value) {
$('#input-tag').val(value.string);
//$('#input-tag').attr('data-value', value.val);
$('#input-tag').data('value', value.val);
};
});
/********************************
/ QUICK SEARCH TAG FUNCTION
/*******************************/
$(function () {
var caret = ' <span class="caret"></span>';
function searchSelect() {
$('.dropdown-menu > li > a').on("click", function() {
$('#search-type').html($(this).text() + caret);
$('#input-tag').attr('placeholder', $(this).data('label'));
$('#input-tag').attr('name', $(this).data('label'));
});
}searchSelect();
});
Polymer({
is: 'search-form',
created: function() {},
ready: function() {},
attached: function() {},
detached: function() {},
attributeChanged: function(name, type) {}
});
</script>
</dom-module>
so the var obj is declared in search-form.html
finally, because of the way our back end is written, I have to run a loop on index.html to get the array to be used in var obj for "city" : [],
that looks like this:
/*TYPEAHEAD ARRAY*/
//MUST BE RUN FROM SHELL BECAUSE OF THE TMPL LOOP
<!-- TMPL_LOOP Cities -->
obj.city.push({val: "<!-- TMPL_VAR city_name -->", string: "<!-- TMPL_VAR city_name -->"})
<!-- /TMPL_LOOP -->
So now the problem. This all works without error in chrome, but I get the same error in FF, IE11, and Edge. That error is:
ReferenceError: obj is not defined
obj.city.push({val: "ALLEN PARK", string: "ALLEN PARK"})
Man I hope I documented this well enough for someone to help, because I have been pulling my hair out for hours before turning to stack :)
I think the imports are not loaded yet when you access the obj var in index.html, thus obj is undefined at this time. Since Chrome supports HTML imports natively, the imports are loaded earlier and it works there. Wrap the access to obj in HTMLImports.whenReady(callback). The callback will be called when all HTML imports have finished loading.
HTMLImports.whenReady(function(){
<!-- TMPL_LOOP Cities -->
obj.city.push({val: "<!-- TMPL_VAR city_name -->", string: "<!-- TMPL_VAR city_name -->"})
<!-- /TMPL_LOOP -->
});
Related
I saw the code snippets at Google reCaptcha within SweetAlert modal window , particularly the one without the jquery (the 1st answer)
But that solution makes the captcha box visible.
How do i make it invisible within Sweetalert? I will do a server backend validation
I looked at https://github.com/prathameshsawant7/multiple-invisible-recaptcha and included the entire code from init_recaptcha.js along with the "onOpen" feature of SWAL... but no luck. The captcha is not set in the form.
Any help will be appreciated> I need the invisible captcha as I will triggering several SWAL forms within the HTML tag of the sweetalert (needed for multiple inputs at time)
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/cover.css">
<script src="js/jquery1.11.1.min.js" type="text/javascript"></script>
<script src="js/sweetalert2#10.js"></script>
<script>
$(document).ready(function() {
$(document).on('click', '#comment_button', function(e) {
e.preventDefault();
//var M_user = "";
Swal.fire({
title: 'Add a comment to the page',
titleText: 'Add a comment to the page',
//included dynamically... :-)
width: '75%',
position: 'center',
showCancelButton: true,
showConfirmButton: false,
showCloseButton: true;
allowOutsideClick: false,
focusConfirm: false,
//grow: 'fullscreen',
allowEscapeKey: true,
html: '<div class="card"><form name="form2" id="form2" method="post" action="process3.php"><div class="form-group"><label for="InputText2">Enter Text (Recaptcha 2)</label><input type="text" class="form-control" id="text2" name="textmsg" placeholder="Enter random text" value="this_is_textmsg"></div><div class="form-group"><label for="InputText3">Enter Text :</label><input type="text" class="form-control" id="textv3" name="textmsg3" placeholder="Enter random text" value="this_is_textmsg3"></div><div id="recaptcha-form-2" style="display:none;"></div><input type="button" class="btn btn-primary" onclick="formSubmit(\'2\')" value="Submit" /></form></div>',
footer: 'We reserve the right to moderate your comments if we feel the need.',
onOpen: function() {
console.log('setting initial values, if any on onOpen');
/***
* #Created by: Prathamesh Sawant (prathameshsandeepsawant#gmail.com)
* #Date : 24/07/2017
* #description To handle Multiple Google Invisible reCaptcha Implementation
*/
/**************************************************************************\
* Step 1 - Initialize reCaptcha Site Key and Widget eg: widget_1 for Form 1
* Step 2 - In init function add code to create form submit callback action.
* Step 3 - Call renderInvisibleReCaptcha function by passing reCaptcha ID
* and createCallbackFn Response.
***************************************************************************/
"use strict";
var PS = PS || {};
var widget_1;
var widget_2;
var widget_3;
var recaptcha_site_key = 'my Real Site Key Goes here....removed for stackoverflow';
if (typeof PS.RECAPTCHA === 'undefined') {
(function(a, $) {
var retryTime = 300;
var x = {
init: function() {
if (typeof grecaptcha != 'undefined') {
//For Form 1 Initialization
if ($('#form1 #recaptcha-form-1').length > 0) {
var callbackFn = {
action: function() {
saveData('1'); //Here Callback Function
}
}
/*--- 'recaptcha-form-1' - reCaptcha div ID | 'form1' - Form ID ---*/
widget_1 = x.renderInvisibleReCaptcha('recaptcha-form-1', x.createCallbackFn(widget_1, 'form1', callbackFn));
}
//For Form 2 Initialization
if ($('#form2 #recaptcha-form-2').length > 0) {
var callbackFn = {
action: function() {
saveData('2'); //Here Callback Function
}
}
/*--- 'recaptcha-form-2' - reCaptcha div ID | 'form2' - Form ID ---*/
console.log('defining widget 2');
widget_2 = x.renderInvisibleReCaptcha('recaptcha-form-2', x.createCallbackFn(widget_2, 'form2', callbackFn));
}
//For Form 3 Initialization
if ($('#form3 #recaptcha-form-3').length > 0) {
var callbackFn = {
action: function() {
saveData('3'); //Here Callback Function
}
}
/*--- 'recaptcha-form-3' - reCaptcha div ID | 'form3' - Form ID ---*/
widget_3 = x.renderInvisibleReCaptcha('recaptcha-form-3', x.createCallbackFn(widget_3, 'form3', callbackFn));
}
} else {
setTimeout(function() {
x.init();
}, retryTime);
}
},
renderInvisibleReCaptcha: function(recaptchaID, callbackFunction) {
return grecaptcha.render(recaptchaID, {
'sitekey': recaptcha_site_key,
"theme": "light",
'size': 'invisible',
'badge': 'inline',
'callback': callbackFunction
});
},
createCallbackFn: function(widget, formID, callbackFn) {
return function(token) {
$('#' + formID + ' .g-recaptcha-response').val(token);
if ($.trim(token) == '') {
grecaptcha.reset(widget);
} else {
callbackFn.action();
}
}
}
}
a.RECAPTCHA = x;
})(PS, $);
}
$(window).load(function() {
PS.RECAPTCHA.init();
});
},
preConfirm: function(login) {
//run any stuff to do before login here
console.log('doing before preConfirm stuff....');
//let s_user_name = Swal.getPopup().querySelector('#s_user_name').value;
//M_user= s_user_name;
},
}).then(function(result) {
console.log('then function result initial');
if (result.value) {
console.log('Doing if result.value here...');
}
}) //swal.fire end
}); //function(e) ends
}); //doc ready ends
</script>
</head>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<center>
<h3 class="">Handle Multiple Invisible Recaptcha</h3>
</center>
</div>
</div>
<div class="inner cover">
<hr>
<form id="comment_form" name="comment_form_name"><button id="comment_button" class="coach_button">Leave a Comment...</button></form>
</hr>
<div class="mastfoot">
<div class="inner">
<p>Sample template by #Prathamesh-Sawant to implement multiple invisible recaptcha on single page dynamically.</p>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?render=explicit"></script>
<script src="js/form.js" async defer></script>
</body>
</html>
I figured it out
Basically, inside sweetalert2, captcha doesn't render...
I was anyway using multiple fields in SWAL... so I had to use fields inside the HTML parameter.
To address the invisible captcha, I took an idea from Invisible reCaptcha AJAX Call . From within sweetalert, using Swal.getPopup().querySelector('#field').value, in pre-confirm, I will populate hidden fields in the form that is outside of sweetalert and submit it via Ajax
Not a brilliantly clean solution but, hey, it works!
The objective is to filter the display of list elements and corresponding markers.I'm unable to understand what is wrong with the logic. The search input should filter and when you undo/cancel the search input then the list should reappear with the markers.
HTML:
enter <html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Neighborhood Map</title>
<link href="style.css" rel="stylesheet">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/knockout-3.4.0.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div id="sidebar" class="col-xs-12 col-sm-5 col-md-3">
<h1 id="header">Chennai City Cultural Hubs</h1>
<div class="search-box">
<input class="text-search" type="text" placeholder="Enter here" data-
bind="textInput: query">
</div>
<div class= "list-box">
<div class="menu" data-bind="foreach: filteredItems">
<a class="menu-item"data-bind="text: title, click: $parent.setLoc" >
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-8">
<div id="map"></div>
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>
JS:
function appViewModel() {
var self = this;
this.query = ko.observable('');
var filter = self.query().toLowerCase();
this.locationArray = ko.observableArray([]);
locations.forEach(function (item) {
self.locationArray().push(item);
});
self.setLoc = function (clickedLoc) {
var clickedData = clickedLoc.marker;
google.maps.event.trigger(clickedData, 'click')
};
this.filteredItems = ko.computed(function () {
if (!this.filteredItems) {
return self.locationArray();
} else {
return ko.utils.arrayFilter(self.locationArray(), function (item) {
var result = (item.title.toLowerCase().indexOf(filter) > -1)
item.marker.setVisible(result);
return result;
});
}
}, self);
};
ko.applyBindings(new appViewModel());
An explanation and solution would be very helpful.
Issues:
Your filter variable is not observable, so it won't update after instantiation. It's always an empty string, since by the time you assign it, query() returns "".
Checking for !this.filteredItems in the computed does not do anything, because it will never be false. (filteredItems is a ko.computed instance, which will evaluate to true)
Solution
You can rewrite your filteredItems to:
this.filteredItems = ko.computed(function () {
var q = this.query().toLowerCase();
if (!q) {
// TODO (?): reset all `setVisible` props.
return this.locationArray();
}
return this.locationArray()
.filter(function(item) {
var passedFilter = item.title.toLowerCase().indexOf(q) > -1;
item.marker.setVisible(passedFilter);
return passedFilter;
});
}, self);
By calling query you create a dependency to any changes in the search input. By calling locationArray you ensure updates when the data source changes. Note that you'll need to make sure your setVisible logic executes, even when you clear the query...
Remarks & tips
If you want, you can swap out Array.prototype.filter with ko.utils.arrayFilter, but the .filter method is widely supported by now.
You can create more (pure) computeds to separate logic. (E.g.: const lowerQuery = ko.pureComputed(() => this.query().toLowerCase()))
I wouldn't call setVisible in the filter since it's an unexpected side effect. Why not make it computed as well?
I'm trying to render a different section of a page and apply the appropriate bindings for different items contained within a single array. Each item in the array could have a different structure / properties.
As an example we could have 3 different question types, the data associated with that question could be in a different format.
JSON Data
var QuestionTypes = { Textbox: 0, Checkbox: 1, Something: 2 }
var QuestionData = [
{
Title: "Textbox",
Type: QuestionTypes.Textbox,
Value: "A"
},
{
Title: "Checkbox",
Type: QuestionTypes.Checkbox,
Checked: "true"
},
{
Title: "Custom",
Type: QuestionTypes.Something,
Something: { SubTitle : "Something...", Description : "...." }
}
];
JavaScript
$(document).ready(function(){
ko.applyBindings(new Model(QuestionData), $("#container")[0]);
})
function QuestionModel(data){
var self = this;
self.title = ko.observable(data.Title);
self.type = ko.observable(data.Type);
self.isTextbox = ko.computed(function(){
return self.type() === QuestionTypes.Textbox;
});
self.isCheckbox = ko.computed(function(){
return self.type() === QuestionTypes.Checkbox;
});
self.isSomething = ko.computed(function(){
return self.type() === QuestionTypes.Something;
});
}
function Model(data){
var self = this;
self.questionData = ko.observableArray(ko.utils.arrayMap(data, function(question){
return new QuestionModel(question);
}));
}
HTML
<div id="container">
<div data-bind="foreach: questionData">
<h1 data-bind="text: title"></h1>
<!-- ko:if isTextbox() -->
<div data-bind="text: Value"></div>
<!-- /ko -->
<!-- ko:if isCheckbox() -->
<div data-bind="text: Checked"></div>
<!-- /ko -->
<!-- ko:if isSomething() -->
<div data-bind="text: Something">
<h1 data-text: SubTitle></h1>
<div data-text: Description></div>
</div>
<!-- /ko -->
</div>
</div>
The bindings within the if conditions get applied whether the condition if true / false. Which causes JavaScript errors... as not all of the objects within the collection have a 'Value' property etc.
Uncaught ReferenceError: Unable to process binding "foreach: function (){return questionData }"
Message: Unable to process binding "text: function (){return Value }"
Message: Value is not defined
Is there any way to prevent the bindings from being applied to the wrong objects?
Conceptual JSFiddle: https://jsfiddle.net/n2fucrwh/
Please check out the Updated Fiddler without changing your code.Only added $data in side the loop
https://jsfiddle.net/n2fucrwh/3/
<!-- ko:if isTextbox() -->
<div data-bind="text: $data.Value"></div>
<!-- /ko -->
<!-- ko:if isCheckbox() -->
<div data-bind="text: $data.Checked"></div>
<!-- /ko -->
<!-- ko:if isSomething() -->
<div data-bind="text: $data.Something"></div>
<!-- /ko -->
Inside the loop you need provide $data.Value.It seems to Value is the key word in knockout conflicting with the binding.
First of all your "QuestionModel" has no corresponding properties: you create "type" and "title" fields only from incoming data.
Proposed solution:
You can use different templates for different data types.
I've updated your fiddle:
var QuestionTypes = { Textbox: 0, Checkbox: 1, Something: 2 }
var QuestionData = [
{
Title: "Textbox",
Type: QuestionTypes.Textbox,
templateName: "template1",
Value: "A"
},
{
Title: "Checkbox",
Type: QuestionTypes.Checkbox,
templateName: "template2",
Checked: "true"
},
{
Title: "Custom",
Type: QuestionTypes.Something,
templateName: "template3",
Something: "Something"
}
];
$(document).ready(function(){
ko.applyBindings(new Model(QuestionData), $("#container")[0]);
})
function QuestionModel(data){
var self = this;
self.title = ko.observable(data.Title);
self.type = ko.observable(data.Type);
self.data = data;
}
function Model(data){
var self = this;
self.questionData = ko.observableArray(ko.utils.arrayMap(data, function(question){
return new QuestionModel(question);
}));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script type="text/html" id="template1">
<div data-bind="text: Value"></div>
</script>
<script type="text/html" id="template2">
<div data-bind="text: Checked"></div>
</script>
<script type="text/html" id="template3">
<div data-bind="text: Something"></div>
</script>
<div id="container">
<div data-bind="foreach: questionData">
<h1 data-bind="text: title"></h1>
<!-- ko with: data -->
<!-- ko template: templateName -->
<!-- /ko -->
<!-- /ko -->
</div>
</div>
In the above edition you can get rid of "QuestionTypes".
Update 1
Of course, you can calculate template name from the question type.
Update 2
Explanation of the cause of errors. If you check original view model:
function QuestionModel(data){
var self = this;
self.title = ko.observable(data.Title);
self.type = ko.observable(data.Type);
self.isTextbox = ko.computed(function(){
return self.type() === QuestionTypes.Textbox;
});
self.isCheckbox = ko.computed(function(){
return self.type() === QuestionTypes.Checkbox;
});
self.isSomething = ko.computed(function(){
return self.type() === QuestionTypes.Something;
});
}
You can see, that "QuestionModel" has following properties: "title", "type", "isTextbox", "isCheckbox" and "isSomething".
So, if you will try bind template to "Value", "Checked" or "Something" you will get an error because view model does not contain such a property.
Changing binding syntax to the
<div data-bind="text: $data.Value"></div>
or something similar eliminates the error, but always will display nothing in this case.
I'm trying to learn polymer, and I'm trying make a basic messaging framework. So I created a little polymer-element called messages-framework that will display messages, and after 3 seconds remove the message. How can expose a method that will add a message to this element?
Here's my polymer element
<link rel="import" href="../bower_components/paper-input/paper-input-decorator.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<polymer-element name="messages-framework">
<template>
<ul>
<template repeat="{{ m in messages }}">
<li>{{ m }}</li>
</template>
</ul>
<paper-input-decorator label="message" floatinglabel>
<input is="core-input" value="{{ message }}" type="text">
</paper-input-decorator>
<paper-button raised on-tap="{{ addMessage }}">Add Message</paper-button>
</template>
<script>
Polymer({
messages: [],
addMessage: function () {
this.messages = this.messages.concat(this.message);
setTimeout(this.removeMsg.bind(this, this.message), 3000);
this.message = "";
},
removeMsg: function (msg) {
this.messages = this.messages.filter(function (m) {
return msg !== m;
});
}
});
</script>
</polymer-element>
Any help would be appreciated!
I don't think I phrased my question well. If have had two polymer elements, for instance messages-framework and a newuser-form, if newuser-form needed to add to the messages-framework, how would that polymer element use messages-framework API?
Exposing API in Polymer is just like one would do in every day elements.
Get a reference to the Element. eg var p = document.getElemnetTagName('p');
use it's methods. eg p.innerHTML = "Hello World" or p.setAttribute(attribute,value)
Example:
Your Custom Element
<polymer-element name="messages-framework">
<template>
//all your core markup
</template>
<script>
Polymer({
messages: [],
addMessage: function () {
this.messages = this.messages.concat(this.message);
setTimeout(this.removeMsg.bind(this, this.message), 3000);
this.message = "";
},
removeMsg: function (msg) {
this.messages = this.messages.filter(function (m) {
return msg !== m;
});
}
});
</script>
</polymer-element>
Using it's API
<body>
//Initialing the Element by loading it on to the page
<messages-framework></messages-framework>
<script>
var messagesFramework = document.getElementsByTagName('messages-framework');
//this will call the addMessage() method of the element
messagesFramework.addMessage();
</script>
</body>
I am having some strange functionality with a virtual Knockout compose using 3 pairs of Views/ViewModels
autoAttendant.js
define(['durandal/app', 'viewmodels/settings/autoAttendant/menu'], function(app, Menu){
return function() {
var self = this;
self.attendant = ko.observable();
self.activate = function() {
self.autoAttendant(new Menu());
};
};
});
autoAttendant.html
<div id="content_pane" class="pushed_right">
<div class="content_box">
<h1>Attendant</h1>
<!-- ko compose: 'viewmodels/settings/autoAttendant/menu' --><!--/ko-->
</div>
</div>
menu.js
define(['durandal/app', 'viewmodels/settings/autoAttendant/menuItem'], function(app, MenuItem) {
return function() {
var self = this;
self.menuItems = ko.observableArray([
new MenuItem('val1', 'label1'),
new MenuItem('val2', 'label2'),
// etc...
]);
};
});
menu.html
<div class="list">
<div class="box_item master">
<!-- html content -->
</div>
<!-- ko foreach: { data: menuItems } -->
<!-- ko compose: 'viewmodels/settings/autoAttendant/menuItem' --><!--/ko-->
<!-- /ko -->
</div>
menuItem.js
define(['durandal/app'], function(app) {
var menuItem = function(val, label, active) {
var self = this;
console.log('val:', val, 'label:', label, 'active:', active); // purely for testing purposes
var _val = val || 'default_val',
_label = label || 'default_label',
_active = active || false;
self.val = ko.observable(_val);
self.label = ko.observable(_label);
self.active = ko.observable(_active);
};
return menuItem;
});
menuItem.html
<div class="level">
<div class="box_item clickable">
<!-- html content -->
</div>
</div>
Together these represent a single page within settings that displays a menu and that menu's sub-items.
Menu and MenuItem must be detached from the attendant View/ViewModel as the menu itself is recursive and a menuItem can link to a sub-menu with its own menuItems.
The problem comes in at the 2nd ko compose. The console.log occurs 3 times and the first 2 it shows the correct passing arguments to the MenuItem constructors in the menu.js:
val: val1 label: label1 active: undefined
At the final console.log print out, the parameters that had been passed are overwritten like so:
val: <!-- ko compose: 'viewmodels/settings/autoAttendant/menuItem' --><!--/ko--> label: Object {model: "viewmodels/settings/autoAttendant/menuItem", bindingContext: L.b.z, activeView: null}
active: undefined
Why does this happen?
The following worked, after thorough research into the source and (more than) a little bit of experimentation:
<!-- ko compose: {view:'settings/autoAttendant/menuItem'} --><!--/ko-->
From Durandal docs on compose