Is it possible to inject a Durandal widget after the page has been composed?

问题

I am working on a durandal application and depending on certain action, I would need to inject a widget using 

At the moment the widget is not shown but only the comment can be seen in the HTML content. Any help? Thanks

回答1:

Yes. Use the if or visible binding on the immediate parent node of your widget binding. If there is no immediate parent node, create one solely for the purpose of holding the if or visible binding.

Take at this code from the DatePicker Widget I wrote for Durandal with Durandal (you can see the video here):

<div>
    <div data-bind="visible: viewMode() === 'month'">
        <div data-bind="compose: {model: 'widgets/_common/datetime/datepickerMonth', view: 'widgets/_common/datetime/datepickerMonth', activate: true, activationData: messageChannel }"></div>
    </div>
    <div data-bind="visible: viewMode() === 'months'">
        <div data-bind="compose: {model: 'widgets/_common/datetime/datepickerMonths', view: 'widgets/_common/datetime/datepickerMonths', activate: true, activationData: messageChannel }"></div>
    </div>
    <div data-bind="visible: viewMode() === 'years'">
        <div data-bind="compose: {model: 'widgets/_common/datetime/datepickerYears', view: 'widgets/_common/datetime/datepickerYears', activate: true, activationData: messageChannel }"></div>
    </div>
</div>

Notice that I'm dynamically injecting which calendar view to show based on a condition. By the way, this is a bit of a trick for creating multi-view widgets (rather than having to write a custom view locator, which can get complicated).

The principle is the same when you're dynamically injecting widgets (as opposed to compositions, as I'm doing here).

I use the visible binding in this case for speed. I don't want to recreate the compositions every time the user switches between views. Users expect a datepicker to be more performant than that.

来源：https://stackoverflow.com/questions/25893953/is-it-possible-to-inject-a-durandal-widget-after-the-page-has-been-composed

标签

javascript

durandal