Kendo UI - dynamically load template to kendo window with observable view model - javascript

Kendo UI for JQuery question incoming.
I have a partial view with a kendo template, a kendo window and an observable view model. What I am trying to achieve is put the template inside of the window and then bind it to the view model like:
var kendoDialog = kendo.template($("#window-template").html());
window.center().open();
window.content(kendoDialog);
kendo.bind($("#window-container"), viewModel);
The window is created correctly and the model is populated correctly but before the binding occurs this line:
window.content(kendoDialog);
Throws description is not defined.
In the template its just:
<div class="col-sm-10">
#: description #
</div>
How would I achieve what I am trying to do?

I have prepared a dojo for you to see the problem:
https://dojo.telerik.com/OsANOcox
The issue is that when you are loading the template it is expecting to some form of a model being passed in which currently you aren't so effectively there is a null model to bind.
so in your code changing:
window.content(kendoDialog);
to
window.content(kendoDialog(viewModel));
will load the data into the template.
But if you are looking to bind it via MVVM as you currently appear to want to then you need to change the template so it is binding aware from:
<div class="col-sm-10">
#= data.description #
</div>
to
<div class="col-sm-10">
<span data-bind="html:description"></span>
</div>
Hope this helps.

Related

Does Durandal have a native way to trigger an event on a specific instance of a module?

I have a complex situation involving several instances of a couple different modules.
For example, I have an input module, form module, and a formSelector module. Selecting a form on the formSelector should populate the form with the correct inputs.
Above the formSelector, I have another form with various inputs.
All the inputs are built out according to what is returned from the database.
Now, I tried using pub/sub to trigger an event to pass the form object from the formSelector to the form module. This works accept that the trigger isn't specific to the form module instance. It triggers the event for all of the forms on the page.
How can I trigger an event only for the specific form instance?
Example
Note: I made this up on the spot just for a reference for the structure. This code probably does not work. Also, I don't think the javascript is necessary to answer the question.
Input: Observes some data
<input data-bind="value: input.data" />
Form: List of Input Modules
<form>
<div data-bind="foreach: form.inputs">
<div data-bind="compose: { model: input.modelPath, activationData: input.activationData }"></div>
</div>
</form>
FormSelector: Select the desired form
//List of buttons to select the desired form
<div data-bind="foreach: forms">
<div data-bind="click: updateForm"></div>
</div>
//The desired Form (Module)
<div data-bind="compose: { model: form.modelPath, activationData: form.activationData }"></div>
Index.html
//Form Module
<div data-bind="compose: { model: mainForm.modelPath, activationData: mainForm.activationData }"></div>
//FormSelector Module
<div data-bind="compose: { model: formSelector.modelPath, activationData: formSelector.activationData }"></div>
Using the example, I want to trigger an event, inside updateForm, which will only trigger for the form composed inside the FormSelector. The problem is, the app wide triggers will update the form above it (the mainForm).
Durandal has wired up events by default on the app class, so you can use the app.trigger and and app.on functions globally.
However, you can wire up your own object by using the Events.includeIn(obj) function.
For more information visit the documentation.

Multiple view models break knockout.js

I'm trying to use multiple view models as suggested in the documentation and in this other answer.
I'm getting an error in the console complaining about a variable not being defined:
Uncaught ReferenceError: Unable to process binding "foreach: function (){return seals }"
Message: seals is not defined
Reproduction online
HTML
<!-- ko foreach: seals -->
<div class="form-group">
<label for="seal" class="col-xs-2 control-label" data-bind="text: 'Seal ' + name"></label>
<div class="col-xs-8">
<input type="text" class="form-control" data-bind="attr: {name: 'seal' + formName}" />
</div>
</div>
<!-- /ko -->
JS
ko.applyBindings(demo, document.body);
ko.applyBindings(addEquipmentModel, document.getElementById('whatever'));
The problem is here:
ko.applyBindings(demo, document.body);
You are applying a model to document.body, so it's going to try and parse and bind the whole document. When it gets to the part with:
<!-- ko foreach: seals -->
You get an error because the demo model doesn't have a seals property.
In practice, you don't want the elements that you are binding to overlap. In other words, don't bind one model to a child element of an element that is bound to another model. They should be siblings, or cousins. Not direct descendants.
If you need several viewmodels nested in your view, or even in a child-parent relation, you should consider using Knockout components for that. Another possibility aside from that is to use apply(this) in your main viewmodel to the other viewmodels 'class' so your main viewmodel sort of inherits the functionality and properties of the referred model. This will, though, lead to problems if you have name concurrencies in your viewmodels.

How can I not have the initial HTML template rendered when using a PhoneJS dx-gallery widget and a template?

I am experimenting with the AngularJS approach for PhoneJS. So far I am really enjoying both frameworks.
Current issues:
Using a dx-gallery or dx-list with a datasource and a template will cause the initial un-bound template to be rendered when the view is navigated.
I found this out once I started using the dx-gallery widget and specifying a template. The console will show a network request for the initial template (not bound) being requested.
Code
<div dx-gallery="{ dataSource: imagesDataSource, height:'60%' }">
<div data-options="dxTemplate: { name: 'item' }">
<img src="http://somehostingcompany.com/{{public_id}}.jpg">
</div>
Question:
How can I not have the initial HTML template rendered when using a PhoneJS dx-gallery widget and a template?
Use ns-src binding instead of specifing src directly:
<img ng-src="http://somehostingcompany.com/{{public_id}}.jpg" />
Check out link https://docs.angularjs.org/api/ng/directive/ngSrc

How to change to a different view from controller in AngularJs

I'm retrieving a person from a service and displaying the details on the details.html template. If the person is not found, the service returns a 404 response and I handle it from within the controller by (currently) displaying an alert popup stating its not found.
Is it possible to dynamically change to a different template, like a 'notfound.html' for instance?
You can do it using ng-switch directive. Save state of your request in variable (for example $scope.items = data if you received your data correctly or $scope.items = false otherwise) and then:
<div ng-switch on="items">
<div ng-switch-when="false" ng-include src="'error.html'"></div>
<div ng-switch-default ng-include src="'details.html'"></div>
</div>

Ember view - how to manipulate DOM after UI rendered without modifying the original source code?

For some reasons, I can only add javascript after Ember application is created (i.e. all UI inited).
The HTML looks like this:
<div id="ember21643" class="ember-view form_field ticket_type_id has-ticket-type-field">
<label for="">
<script id="metamorph-249-start" type="text/x-placeholder"></script>
Type
<script id="metamorph-249-end" type="text/x-placeholder"></script>
</label>
<div id="zd_mn_385" class="zd-selectmenu zd-selectmenu-root zd-state-default">
<button id="zd_mn_386" class="zd-selectmenu-base" role="button" tabindex="0" style="width: 131px; "><span class="zd-selectmenu-base-arrow zd-icon-triangle-1-s"></span><span id="zd_mn_387" class="zd-selectmenu-base-content">-</span></button>
</div>
</div>
It's easy to use jQuery to target the to do direct DOM modification but I worry that it will break the Ember application.
Is there a proper way to change this view, for example:
append/prepend a text to the div container
change the text to something else instead of "Type" as in the above example.
Using DOM inspection, this view looks like it can be accessed from:
Ember.View.views.ember21643
And
Ember.View.views.ember21643._childViews[0]
is pointing to "label". So I set
Ember.View.views.ember21643._childViews[0]._lastNormalizedValue = "ABC"
but it's still showing "Type" on the screen so probably this is not the way to do.
Please help. Thanks alot. (I'm new to Ember).
I'm not sure if i'm missing your point but, if I wanted to change the text in an ember view, I think I would use the Ember bindings.
template
<div id="someView" type="text/x-handlebars">
This sentence has a dynamic {{ end }}
</div>
view
App.someView = Ember.View.extend({
end : 'conclusion',
templateName: 'someVIew' //not really necessary with new router to be explicit
})
view with binding
App.someView = Ember.View.extend({
endBinding : 'contoller.end',
templateName: 'someVIew' //not really necessary with new router to be explicit
})
Does any of that help? :)

Categories