I appreciate your help in advance.
I'm just messing around with an example using components. I'm trying to build up to a bigger project.
Below is the code. I'm able to inject the component directly into the markup, but I'm having trouble appending the component dynamically on a button click. Please offer any suggestions you may have to get this going.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="../scripts/knockout-3.4.0.js"></script>
<script src="../scripts/jquery-1.9.1.js"></script>
</head>
<body>
<greetings-component></greetings-component>
<br /><br />
<hr />
<br /><br />
<greetings-component params="fName: 'George', lName: 'Jones'"></greetings-component>
<br /><br />
<hr />
<br /><br />
<button id="add">Add Greeting</button>
<div id="greet_container"></div>
<script>
$('#add').click(function () {
$('#greet_container').append('<greetings-component></greetings-component>'); // ****** problem is right here: jquery isn't noticing the custom tag ******
})
ko.components.register('greetings-component', {
viewModel: function (params) {
this.fName = ko.observable(params && params.fName);
this.lName = ko.observable(params && params.lName);
this.fullName = ko.computed(function () {
var name = this.fName() + " " + this.lName();
if (this.fName() == null || this.lName() == null)
name = "Sir or Ma'am";
return name;
}, this);
},
template: "<input type='text' data-bind='value: fName' />" +
"<br> <input type='text' data-bind='value: lName' />" +
"<br> Dear: <span data-bind='text: fullName'></span>"
});
ko.applyBindings();
</script>
</body>
</html>