A fun little Newsletter generator I am working on that uses KnockOut and jQuery in magical and new amazing ways! It is kinda ugly right now, because it is still in process–so shut up.
Knockout: (you only get a sample, you don’t need to see all of the crazy)
// let's list out the images to select
function f_imgBig()
{
var newArray = Array();
newArray.push(
"images/366_A.jpg",
"images/366_B.jpg",
"images/366_C.jpg",
"images/366_D.jpg",
"images/366_E.jpg",
"images/366_none.jpg"
);
return newArray;
}
function f_imgBigSel()
{
var newArray = Array();
newArray = f_imgBig() ;
return newArray[0];
}
// now let's add in the viewModel and sorting
var viewModel = {}; // always outside of the document load
$(function() {
<!-- drag drop sort -->
$( "#leftA,#leftB,#leftC" ).sortable({ connectWith: ['#leftA','#leftB','#leftC'] });
<!-- VIEW -->
viewModel = {
postList_L: ko.observableArray( leftPost() ),
addPost_L: function () {
this.postList_L.push({
img : f_imgBig(),
imgSel : ko.observable(f_imgBigSel())
});},
ko.applyBindings(viewModel);
});
Here is the html template.
(yes I am using tables, don’t worry about it)
<pre><!-- LEFT -->
<table data-bind="visible: postList_L().length > 0" bgcolor="#FFFFFF">
<tr><td id="module_area">
<ul data-bind='template: { xxxxxxxx id="leftB" ></ul>
<ul data-bind='template: { name: "postTemplate_L", foreach: postList_L }' id="leftA" ></ul>
<ul data-bind='template: { xxxxxxxx id="leftC" ></ul>
</td></tr>
</table>
<input name="AddPost" type="image" src="_css/img/20.gif" data-bind="click: addPost_L" id="addPost">
<!-- post -->
<script type="text/html" id="postTemplate_L">
<li style="background:#EFE;" id="sel">
<div id="mov"></div>
<input name="del" type="image" src="_css/img/20.gif"
data-bind="click: function(){ viewModel.removePost_L($data); },
visible: viewModel.postList_L().length > 1" id="del">
<input type="image" data-bind="attr: { src: imgSel }" />
<select data-bind="options: img, value: imgSel" />
</li>
</script></pre>
