Menu
I am working on a website that updates values on the page every 5 seconds, it calls to a remote database and returns a MVC model through a Get Json call, and call
viewModel = ko.mapping.fromJS(model).
I am then updating this view model every 5 seconds using another Get call and call this mapping call then
viewModel = ko.mapping.fromJS(model, viewModel).
The bindings are correct on my HTML elements as the original model that is retrieved from the database is displayed on the screen but then when the IsVisible property on the model nothing happens, ie the table row should be set to invisible, and another should be set to visible.
On each update the model should be different, with rows set to visible or invisible along with other span's text updating, this part is working, and updates are showing on the page, just the visibility is not changing.
HTML exert of the visible invisible problem, with Javascript of the update call.
All variables from the Model are correctly called I cannot post the model up for the public.
<table class="SelectionTable" cellpadding="0" cellspacing="0">
<tbody data-bind="foreach: { data: markets.Selections, as: 'selections' }">
<tr class="Selection">
<td><span data-bind='text: selections.Number, visible: selections.IsVisible'></span></td>
<td><span data-bind='text: selections.Name, visible: selections.IsVisible'></span></td>
<td><span data-bind='text: selections.CurrentPrice, visible: selections.IsVisible'></span></td>
<td><span data-bind='text: selections.OpeningPrice, visible: selections.IsVisible'></span></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var viewModel;
var self;
var getUpdates = setInterval(function () {
$.getJSON(
"/Home/Get", {},
function (model) {
viewModel = ko.mapping.fromJS(model, viewModel);
});
}, 5000);
$(document).ready(
function () {
$.getJSON(
"/Home/Get", {},
function (model) {
viewModel = ko.mapping.fromJS(model);
bindViewModel();
});
});
function bindViewModel() {
ko.applyBindings(viewModel);
}
</script>
636
To create an observable, assign the ko. observable function to the variable. A default value can be specified in the constructor of the call. Knockout then converts your variable into a function and tracks when the value changes, in order to notify the UI elements associated with the variable.
To activate Knockout, add the following line to a <script> block: ko. applyBindings(myViewModel); You can either put the script block at the bottom of your HTML document, or you can put it at the top and wrap the contents in a DOM-ready handler such as jQuery's $ function.
Knockout. js defines an important role when we want to detect and respond to changes on one object, we uses the observable. An observable is useful in various scenarios where we are displaying or editing multiple values and require repeated sections of the UI to appear and disappear as items are inserted and deleted.
I find that you sometimes need to provide an empty mapping when updating a viewmodel:
ko.mapping.fromJS(model, {}, viewModel);
Failing that, output the value of selections.IsVisible and make sure that it is in a format that can resolve to true or false.
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
