I'm not sure what the purpose of this part of your application is about, but try this out.
<div data-bind="foreach: articles">
<span data-bind="text: Title"></span>
<a href="#"
data-bind="click: function() { $root.openModal($index()); }">
Read Full Notes
</a>
</div>
<aside class="modal fade">
<div class="modal-dialog">
<article class="modal-content"
data-bind="with: modalArticle>
<section class="modal-header">
<button class="close" type="button" aria-hidden="true"
data-bind="closeModal">
×
</button>
<h3 class="modal-title"
data-bind="text: Title">
</h3>
</section>
<section class="modal-body">
<p data-bind="text: Desc"></p>
</section>
<section class="modal-footer">
<button class="btn btn-default" type="button"
data-bind="click: function() { $root.closeModal(); }">
Close
</button>
</section>
</article>
</div>
</aside>
(function() {
'use strict';
var ModalViewModel, NewsArticleViewModel, articlesCollection;
// Get from API, etc.
articlesCollection = [
{
Title: 'Aenean ornare leo eleifend erat',
Desc: 'Etiam blandit est at ante aliquam, dapibus ornare est egestas. Suspendisse potenti. Praesent scelerisque tristique nulla, nec mollis eros vulputate vitae. Nam ac lacus ut risus bibendum ultricies vel eu dui. Nulla odio nibh, varius id pretium sit amet, tincidunt dapibus est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec erat leo, ornare ac adipiscing vitae, lobortis a arcu'
}, {
Title: 'Donec egestas, dui sed faucibus',
Desc: 'Etiam tincidunt facilisis lobortis. Proin fermentum vulputate ipsum. Praesent est nisl, molestie eu leo vel, ullamcorper rutrum felis. Ut tempus turpis ligula, eget sollicitudin nisi adipiscing in. In semper facilisis feugiat. Nullam placerat pulvinar velit et aliquet. Curabitur sapien odio, vestibulum a luctus ac, rhoncus nec ante. Nam blandit interdum mauris quis cursus. Phasellus sagittis ipsum et est imperdiet, ac porta neque porta'
}, {
Title: 'In hendrerit, eros non feugiat',
Desc: 'Proin dictum eros ac pulvinar bibendum. Duis dolor lectus, malesuada non accumsan non, hendrerit vitae arcu. Morbi vel felis tincidunt, convallis massa eleifend, blandit ligula. Sed non vestibulum diam, et molestie nisl. Nam id aliquam eros. Sed condimentum sem at diam consequat, quis molestie neque luctus. Aenean lectus tortor, vehicula sit amet iaculis quis, blandit eu odio. Vivamus et interdum diam. Etiam a tortor in elit scelerisque sollicitudin. Pellentesque quis aliquet ipsum. Maecenas a est in magna luctus dignissim'
}
];
NewsArticleViewModel = (function() {
function NewsArticleViewModel(Title, Desc) {
if (Title == null) {
Title = '';
}
if (Desc == null) {
Desc = '';
}
this.Title = ko.observable(Title);
this.Desc = ko.observable(Desc);
}
return NewsArticleViewModel;
})();
ModalViewModel = (function() {
function ModalViewModel(articles) {
var article, i, articlesCount;
this.articles = []
for (i = 0, articlesCount = articles.length; i < articlesCount; i++) {
article = articles[i];
this.articles.push(new NewsArticleViewModel(article.Title, article.Desc));
}
this.modalArticle = new NewsArticleViewModel();
}
ModalViewModel.prototype.closeModal = function() {
modalArticle.Title('');
modalArticle.Desc('');
$('#newsModal').modal('close');
};
ModalViewModel.prototype.openModal = function(articleIndex) {
var article;
article = this.articles()[articleIndex];
this.modalArticle.Title(article.Title);
this.modalArticle.Desc(article.Desc);
$('#newsModal').modal('open');
};
return ModalViewModel;
})();
ko.applyBindings(new ModalViewModel(articlesCollection));
})();
