1

I am dynamically inserting html in durandal views but it does'nt work can any one help me out in that? my sample html is

in durandal view

<div data-bind="foreach:arrayofmodels">
    <div data-bind="html:dynamichtml"/>
  </div>

in my model(not view model) which is going to insert dynamic html

dynamichtml(<span data-bind="click:Mymodelclickfunction"/>);

in my viewmodel 

    var arrayofmodels=ko.observableArray();
     vm={
         arrayofmodels:arrayofmodels;
       }
return vm;

there is a separate function to get list of model objects and push them into arrayofmodels array .

I understand the problem is inserting html after bindings were applied, but how to solve this issue?

pashaplus
  • 3,596
  • 2
  • 26
  • 25
  • How do you insert the html? Can you post some more context? your sample is not even a valid databinding expression. Have you meant `data-bind="text: viewmodelProperty"`? – nemesv Jun 04 '13 at 15:40

1 Answers1

-1

Updated:

Have you considered using Durandal's compose mechanism for that purpose? Assuming that the model returns a constructor function with a Mymodelclickfunction property something along the following should get you started.

model.js

define(function() {
    return function() {
        this.Mymodelclickfunction = function(){
           //...
        }
    };
});

model.html

<div>
    <span data-bind="click:Mymodelclickfunction"/>
</div>

Update based on comment durandal view

<div data-bind="foreach:arrayofmodels">
    <!-- ko compose: $data -->
    <--/ko -->
</div>

Take a look at the view-composition section of http://dfiddle.github.io/dFiddle-1.2/#/view-composition to see some more examples.

RainerAtSpirit
  • 3,723
  • 1
  • 17
  • 18
  • Durandals compose is a very poor solution for injecting HTML from another file. It inserts an extra div, so cannot be used for example to inject a TD from a file into a table row, it is slower than normal ko templates, and messed with the context, for example a table row context becomes the whole binding context for the view in a way that the view cannot reference the parent context easily. Compose is great, but not for this purpose. The durandal view above has typo, is missing the : after compose: – pilavdzice Mar 12 '14 at 18:16
  • 1
    better solution is ko external template engine, see here: https://github.com/ifandelse/Knockout.js-External-Template-Engine – pilavdzice Mar 12 '14 at 18:23