knockout.js - I need a knockout with binding in the template data: binding -
i have created fiddle scenario:
i using template binding @ end bind selectedlistitem() observable data property of template binding.
i faking async ajax call settimeout of 4 seconds. fill observables , selectedlistitem alarm item.
but 4 seconds late because before happens binding error alarmnumber bound in template.
i need ko with: selectedlistitem() bind template have never seen it.
furthermore use ko comment binding like
<!-- ko with: selectedlistitem() --> <!-- template binding here... --> <!-- /ko --> because have set currentchildtemplate() observable in every alarmviewmodel makes no sense @ all.
how can solve that?
html
<div id="rightheader" style="float: right; background: green; height: 100%; width: 10%;"> </div> <div style="clear: both;"></div> </div> <div style="float: right; background-color: seagreen;"></div> </div> <!-- /ko --> <script id="map" type="text/html"> <div style="position: absolute; top: 200px; background-color: green; width: 300px; height: 200px;" data-bind="text: alarmnumber"></div> </script> <script id="response" type="text/html"> <div style="position: absolute; top: 200px; background-color: red; width: 300px; height: 200px;" data-bind="text: alarmnumber"></div> </script> <div data-bind="template: { name: currentchildtemplate(), data: $root.selectedlistitem() }"></div> css
body, html { width: 100%; height: 100%; padding: 0; margin: 0; } .alarmtemplate { height: 80px; margin: 10px; background: lightgray; border: black solid 1px; padding-left: 5px; } #alarmlistcontainer { height: 80px; background: yellow; vertical-align: middle; background: gray; border: black solid 1px; display: table; width: 100%; margin: 0 auto; } #navigationwheeler { background: yellow; display: table-cell; vertical-align: middle; } .selected { background-color: #0094ff; } #togglebuttonleft { border: black solid 1px; cursor: pointer; text-align: center; width: 40px; } #togglebuttonright { width: 40px; border: black solid 1px; cursor: pointer; text-align: center; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .cellcontainer { width: 20%; float: left; } javascript
function alarmwheelviewmodel(alarms) { var self = this; self.selectedlistitem = ko.observable(); self.selectlistalarm = function (alarm) { self.selectedlistitem(alarm); } var alarms = []; (var = 0; < 10; i++) { var alarmvm = new alarmviewmodel(i, 'test' + i, 'yeahh', self.selectedlistitem); alarms.push(alarmvm); } self.currentchildtemplate = ko.observable('response'); self.visiblealarms = ko.observablearray(); // display first 5 alarms self.hiddenalarms = ko.observablearray(); // hide remaining alarms // faking async ajax call here test how ui behaves when selectedlistitem not set yet // result alarmnumber can not bound have expected :/ settimeout(getdata, 4000); function getdata() { self.visiblealarms(alarms.slice(0, 5)); // display first 5 alarms self.hiddenalarms(alarms.slice(5)); // hide remaining alarms self.selectedlistitem(self.visiblealarms()[1]); }; self.hidecurrentalarm = function () { $('#currentalarm').hide(); } self.hidealarmlist = function () { $('#currentalarm').show(); }; } function alarmviewmodel(alarmnumber, alarmmessage, alarmaddress, selected) { var = this; that.alarmnumber = alarmnumber; that.alarmmessage = alarmmessage; that.alarmaddress = alarmaddress; that.isselected = ko.computed(function () { return selected() === that; }); } var vm = new alarmwheelviewmodel(); ko.applybindings(vm);
<!-- ko with: selectedlistitem() --> <div data-bind="template: { name: $root.currentchildtemplate() }"></div> <!-- /ko --> this fix problem currentchildtemplate. call root element not inside selectedl.istitem
Comments
Post a Comment